先后端分离后开发阶段跨域问题处理

先后端分离以后，开发阶段接口联调就会出现ajax跨域问题。
固然，跨域问题的解决方案仍是挺多的，这里梳理下我接触到的几种方案。

1、禁用Chrome的同源策略

目测这是最简单粗暴的方案

能够经过使用Chrome命令行启动参数来改变Chrome浏览器的设置。
这里使用的是disable-web-security参数，这个参数能够下降Chrome浏览器的安全性，禁用同源策略。要支持跨域，还须要加上user-data-dir。

下面以Windows为例。
1.先关闭全部的Chrome窗口。
2.新建一个Chrome快捷方式，右击->属性->快捷方式。
3.在目标(T)中设置参数：

--args --disable-web-security --user-data-dir

4.点击应用/肯定，以这个快捷方式打开Chrome浏览器，效果以下：

2、webpack-dev-server代理

devServer: {
    ...
    proxy: {
        '/api': {
            target: 'http://127.0.0.1:8080',
            pathRewrite: {'^/api': '/api/v1'}
        }
    }
}

将 '/api' 经过本地开发服务器webpack-dev-server转发到 'http://127.0.0.1:8080'，即转发到后端服务。pathRewrite用于路径转换，具体取决于你请求的uri与后端服务实际uri的差别，好比你本地起的80端口，你的uri为 'http://localhost/api'，将为转换成 'http://127.0.0.1:8080/api/v1'。
详细配置请移步 webpack devServer。

3、nginx反向代理

http {
    ...
    server {
        ...
        location /api/ {
            proxy_pass http://127.0.0.1:8080
        }
    }
}

4、后端实现CORS接口

CORS须要浏览器和服务器同时支持。目前全部现代浏览器都支持该功能，IE浏览器不能低于IE10。
对于前端开发者来讲，CORS通讯与同源的AJAX通讯没有差异，代码彻底同样。

后端实现CORS接口只需合理设置Response Header，以node为例：

const express = require('express');
let app = express();
app.all('*', (req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    res.setHeader('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
    next();
});
...