跨域处理

下面案例都以'http://api.com'为服务端接口地址

webpack代理跨域

此方式都有共同的底层包http-proxy-middleware

代理跨域本质上请求发送(接收)之前加入中间层服务器(服务器与服务器之间不存在跨域)，将请求代理成本域

反向代理：正向代理隐藏真实客户端，反向代理隐藏真实服务端

Vue-cli 2.x

• config->index.js->dev中：

  proxyTable: {
    '/api': { 
      target: 'http://api.com', //接口源地址 
      changeOrigin: true, //是否跨域
      secure: true,  
      pathRewrite: { 
        '^/api': '' //路径重写 
      } 
    } 
  },

Vue-cli 3.x

• vue.config.js 如果没有就新建

  module.exports = {  
  	devServer: {	  
  		port: 8000,    
  		proxy: {      
  			"/api": {        
  				target: 'http://api.com'    
        }    
  		}  
  	}
  };

之后请求的接口由vue开启的服务代理，以/api开头请求，无需其他操作:

Axios.defaults.baseURL = '/api'

缺陷: 基于webpack服务, 打包后没有了

Node代理跨域

cors-anywhere

1. 使用node本地开启代理服务

// Listen on a specific host via the HOST environment variable
var host = process.env.HOST || "0.0.0.0";
// Listen on a specific port via the PORT environment variable
var port = process.env.PORT || 7777;
var cors_proxy = require("cors-anywhere");
cors_proxy.createServer({    
	originWhitelist: [],// Allow all origins    
	requireHeader: ["origin", "x-requested-with"],   
	removeHeaders: ["cookie", "cookie2"],
})
.listen(port, host, function() {    
	console.log("Running CORS Anywhere on " + host + ":" + port);  
});

2. 请求时以此路径开头

Axios.defaults.baseURL = 'http://127.0.0.1:7777/http://api.certificate.uuudoo.com'

缺点：此方式无法传递cookie，作者认为中间传递cookie不安全

webpack-dev-middleware

若前后端在一个服务且后端用nodejs，可以使用webpack配合中间件webpack-dev-middleware将前后端处理到一起也不会跨域

const webpack = require('webpack')
const middle = require('webpack-dev-middleware')
const compiler = webpack(require('./webpack.config.js'))
app.use(middle(compiler))

其他跨域方式概括

• 第一种方式：jsonp请求；jsonp的原理是利用 本站总访问量次 | 本站访客数人