跨域(CORS policy)

跨域(CORS policy)**-** Access-Control-Allow-Origin

**   **跨域只是在前端浏览器存在的安全问题，后端服务器是不存在跨域的

    协议，ip 和名字和端口号任何一个不一样都算跨域。

跨域就是由于 ajax 引起的，当前的地址和 ajax 获取数据的地址 只要协议、域名、端口任意不同都会出现跨域

– koa2 配置跨域

跨域的解决

    1.代理 （前端控制）

        ngix

        webpack

       vue 自带

       vue 项目的根目录下  vue.config.js  配置https://www.jianshu.com/p/b358a91bdf2d

    

配置了一定要重启

module.exports = {
  //暴露导出选项
  //vue自带跨域解决方法。
  devServer: {
    //代理本质是ngix转发，打包后就无效了。只是开发环境使用
    port: "8222", //重新配置端口名,可配可不配
    proxy: {
      //代理
      "/api": {
        //其他接口完全不能同名
        target: "https://www.baidu.com", //代理的目标地址
        changeOrigin: true, //改变源地址
        secure: false, //是否安全 太安全了，就无法更改
        pathRewrite: {
          //重写路径
          "^/api": "", //在地址前加 /api 就可以访问了
          //https://www.baidu.com === /api
        },
      },
    },
  },
};

2.JSONP （动态创建 script 标签）

• JSONP 跨域-前端适配，后端配合
• 前后端同时改造

   jsonp 原理：img、srcipt，link 标签的 src 或 href 属性不受同源策略限制，可以用来作为请求，后端接受请求后返回一个回调函数 callback，调用前端已经定义好的函数，从而实现跨域请求，如：

$("#btn").click(function () {
  var frame = document.createElement("script");
  frame.src = "http://localhost:3000/article-listname=leo&age=30&callback=func";
  $("body").append(frame);
});
// 此为回调函数，其中res为后端返回的数据
function func(res) {
  alert(res.message + res.name + "你已经" + res.age + "岁了");
}

其中， func 这个回调函数命名，需要前后端沟通一致

    3.cors**(后台控制)**

       nodejs  路由配置前，对所有接口处理跨域

server.all("*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*"); //允许所有的源地址
  res.header("Access-Control-Allow-Headers", "Content-Type"); //请求头 post配置
  res.header("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS"); //方法
  next(); //放行
});