跨域@跨域问题
面试中几乎所有的面试都会提到跨域问题, 今天抽空总结下来
什么是跨域
一个域名下网页,向另一个域名下发送请求,请求另一个域名下的资源:
- 一级域名不同: www.a.com -> www.b.com
- 二级域名不同: oa.tu.com -> hr.tu.com
- 端口不同: localhost:5500 -> localhost:3000
|| - 协议不同: http:localhost -> https:localhost
80 443 - 即使同一台机器: 域名不同: -> IP
localhost 127.0.0.1
以上五种情况(分的比较细)都会产生跨域问题
解决方法
一、JSONP发送异步跨域请求:
- 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相对较麻烦,需要前后台配合完成。