zoukankan      html  css  js  c++  java
  • CORS浏览器跨域以及node解决办法

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

     链接在此:http://stackoverflow.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 我是代理域名 

  • 相关阅读:
    NOI2015 寿司晚宴
    bzoj3456 城市规划
    DDP入门
    HAOI2018 染色
    曹冲养猪
    采药
    跳跳棋
    基础复习笔记-最短路

    康熙环球
  • 原文地址:https://www.cnblogs.com/johnzhu/p/5950313.html
Copyright © 2011-2022 走看看