CORS浏览器跨域

时间：2024-01-06 22:32:26

在SO上发现一个解释跨域很棒的　　　　

链接在此：http://*.com/questions/10636611/how-does-access-control-allow-origin-header-work

前后端分离，本地前端开发调用接口会有跨域问题，一般有以下几种解决方法：

1. 后端接口打包到本地运行（缺点：每次后端更新都要去测试服下一个更新包，还要在本地搭建java运行环境，麻烦）

2. CORS跨域：后端接口在返回的时候，在header中加入'Access-Control-Allow-origin':* 之类的（有的时候后端不方便这样处理，前端就蛋疼了）

3. 用nodejs搭建本地http服务器，并且判断访问接口URL时进行转发，完美解决本地开发时候的跨域问题。

4. 使用谷歌的插件解决:https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi （这个我平时开发用的最多）

5. 或者谷歌开启允许跨域,参考 http://camnpr.com/archives/chrome-args-disable-web-security.html

当然还有jsonp，一般不考虑

前端使用第三种方式比较方便，具体网上有很多实现代码。原理就是在请求的response上加个响应头

github上有个例子比较好用：https://github.com/Freeboard/thingproxy

核心代码：

function addCORSHeaders(req, res) {

    if (req.method.toUpperCase() === "OPTIONS") {

        if (req.headers["access-control-request-headers"]) {

            res.setHeader("Access-Control-Allow-Headers", req.headers["access-control-request-headers"]);

        }

        if (req.headers["access-control-request-method"]) {

            res.setHeader("Access-Control-Allow-Methods", req.headers["access-control-request-method"]);

        }

    }

    if (req.headers["origin"]) {

        res.setHeader("Access-Control-Allow-Origin", req.headers["origin"]);

    }

    else {

        res.setHeader("Access-Control-Allow-Origin", "*");

    }

}

也就是把域名加到返回res上。

 ---------- 另外

很多本地的轻量服务都提供跨域配置，很方便。

webpack-dev  proxy配置

或者

http-server -P 我是代理域名

相关文章