跨域 - 简书

什么是跨域？

跨域其实是浏览器的同源策略造成的，它限制与其他源进行交互。而只有当协议，域名，端口相同的时候才是同源。

地址.png

如何解决跨域？
1.跨域资源共享（CORS）是一种机制，它允许浏览器向跨源服务器，发出XMLHttpRequest请求。实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
浏览器讲CORS分为简单请求和非简单请求

简单请求满足
（1）.请求方式只能为以下其中之一 get post head。
（2）.同时请求头不能超过以下几种字段

Accept
Accept-Language
Content-Langua ge
Last-Event-ID
Content-Type
后端则设置

"Access-Control-Allow-Origin"  // 支持什么域访问  * 为所有
"Access-Control-Allow-Credentials" // true 允许客户端请求携带验证信息，如cookie
"Access-Control-Request-Method" //支持的所有跨域请求的方法

其余都为非简单请求

第三方中间件

const cors = require("koa-cors");
app.use(cors());

3.nginx代理（webpack配置文件也有代理）

location /api/ {
      # API Server
      proxy_pass http://www.a.com;  #将真正的请求代理到http://www.a.com
 }

4.JSONP (注意：仅支持 GET 方法）
jsonp 有的优势就是 script 加载 js 的优势

1.前端定义解析函数（例如 jsonpCallback=function(){....}）
2.通过 params 形式包装请求参数，并且声明执行函数(例如 cb=jsonpCallback)
3.后端获取前端声明的执行函数（jsonpCallback），并以带上参数并调用执行函数的方式传递给前端。

// 后端
app.use(async (ctx, next) => { 
  if (ctx.path === "/api/jsonp"){
    const { cb, msg } = ctx.query; 
    ctx.body = `${cb}(${JSON.stringify({ msg })})`;    
    return; 
 }
});

// 前端
function cb(msg) {}
$.ajax({ 
   url: "http://localhost:8080/api/jsonp",  
  dataType: "jsonp",   
  type: "get",    
  data: { msg: "hello"},   
  jsonp: "cb",    
  success: function(data) { console.log(data);  }  });

5.window.postMessage
解决iframe跨域

跨域

推荐阅读更多精彩内容