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相对较麻烦,需要前后台配合完成。

你可能感兴趣的:(jsonp,cors,跨域,js)