跨域造成原因:协议,域名,端口不同都会造成跨域
跨域解决方案:
webpack proxy 代理
module.exports = {
entry: '',
output: {},
devServer: {
proxy: {
// 代理
'/api': {
target: 'http://localhost:3000',
pathRewrite: { '/api': '' }
}
}
}
}
前端可以通过这种方式联调,但无法在生产使用
cors 跨域资源共享
// cors
var allowCrossDomain = function(req, res, next) {
// 请求源 ajax http://localhost:8080
res.header('Access-Control-Allow-Origin', '*')
// 请求头 x-token
res.header('Access-Control-Allow-Headers', '*')
// 请求方式 get post put del
res.header('Access-Control-Allow-Methods', '*')
next()
}
app.use(allowCrossDomain)
nginx反向代理
由运维人员配置,前端调 Nginx 中间件,nginx调接口
webpack plugin
webpack-dev-middleware 中间件
// 中间件
let webpack = require('webpack');
let middle = require('webpack-dev-middleware');
let compile = webpack(require('./webpack.config.js'));
app.use(middle(compile));
将前端代码和后端服务绑在一起启动,解决跨域问题