JSONP、CORS解决跨域问题

跨域@跨域问题

面试中几乎所有的面试都会提到跨域问题， 今天抽空总结下来

什么是跨域

一个域名下网页，向另一个域名下发送请求，请求另一个域名下的资源：

1. 一级域名不同: www.a.com -> www.b.com
2. 二级域名不同: oa.tu.com -> hr.tu.com
3. 端口不同: localhost:5500 -> localhost:3000
   ||
4. 协议不同: http:localhost -> https:localhost
   80 443
5. 即使同一台机器: 域名不同： -> IP
   localhost 127.0.0.1

以上五种情况（分的比较细）都会产生跨域问题

解决方法

一、JSONP发送异步跨域请求:

1. JSONP: JSON with Padding 填充式json
   问题1: ajax不能发送跨域请求
   解决1: 请

其实: $.ajax可自动实现jsonp效果:
$.ajax({
url:“url”,
… : … ,
dataType:“jsonp”, //使用jsonp方式请求服务端
success:function(res){ … }
})
原理: 同以上6步:
1. 动态创建script元素发送请求
2. 自动为success匿名函数定义随机函数名拼接到url?callback=随机函数
3. success函数执行后，自动删除script元素
强调:jsonp单靠客户端无法实现，必须服务端负责拼接函数名和要返回的数据。所以必须客户端服务端同时修改才可支持

二、CORS解决跨域访问:（简单方便、推荐）

1、jsonp 填充式json
 2、在服务器端程序配置允许那个域名下程序访问
  nodejs 下载模块 cors   
  npm i cors
 3、在主程序 app.js
  const cors = require("cors"); #引入模块
  app.use(cors({     #允许那个域名程序跨域访问
   origin:["http://127.0.0.1:8080","http://localhost:8080"]
   ....
  }))
  app.get("/list"...)
 #注意:配置代码在所有请求之前添加

总结：以上两种方法推荐cors,jsonp相对较麻烦，需要前后台配合完成。