跨域整理

跨域造成原因：协议，域名，端口不同都会造成跨域

跨域解决方案：

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));
复制代码

将前端代码和后端服务绑在一起启动，解决跨域问题