2

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

一、禁用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浏览器,效果如下:
图片描述

二、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

三、nginx反向代理

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

四、后端实现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();
});
...

JasonScript
221 声望5 粉丝

FE