一、vue.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
module.exports = {
publicPath: 'project',
outputDir: 'docs',
lintOnSave: false,
devServer: {
host: 0.0.0.0,
port: 8080,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true
}
}
}
};
|
假设后端请求地址是localhost:3000，配置devServer的proxy即可，但这个方式只能在开发环境中使用。
二、cors
后端操作，服务器开启跨域资源共享
1
2
3
4
5
6
7
8
9
10
| const cors = require('koa2-cors');
const app = new Koa();
app.use(cors({
origin: function(ctx) {
return ctx.header.origin
},
allowMethods: [ 'GET', 'POST', 'PUT', 'DELETE', 'OPTIONS' ],
credentials: true,
allowHeaders: ['Content-Type', 'Authorization', 'Accept', 'Content-Length'],
}));
|
注意前端也需要设置 credentials：
axios.defaults.withCredentials = true; // 表示跨域请求时是否需要使用凭证
三、nginx代理
配置nginx，使其代理后端端口返回数据
1
2
3
4
5
6
7
8
9
10
| server {
listen 80;
server_name originServer;
location / {
root /project/;
index index.html;
try_files $uri $uri/ /index.html;
proxy_pass http://127.0.0.1:3000/;
}
|
四、http-proxy-middleware代理
1
2
3
4
5
6
7
8
9
10
| var proxy = require('http-proxy-middleware')
var app = express()
app.use('/api', proxy({
target: 'http://xxxxx',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}))
|
