1.跨域解决方案一:cors技术
CORS :全称cross origin resource share （资源共享）
工作原理： 服务器 在返回响应报文的时候，在响应头中 设置一个允许的header
res.setHeader(‘Access-Control-Allow-Origin’, ‘*’)
CORS :全称cross origin resource share （资源共享）
服务器 在返回响应报文的时候，在响应头中 设置一个允许的header
//服务器设置CORS,允许浏览器跨域
res.setHeader('Access-Control-Allow-Origin', '*')
2-express使用中间件cors
官网传送门:https://www.expressjs.com.cn/resources/middleware.html
xpress有一个自带的中间件cors，它的作用是自动给每一个res设置默认请求头
这样就不用我们自己每一个接口都要设置一次了
仅需两步即可潇洒搞定!
//1.下包
$ npm install cors
//2配置中间件
var cors = require('cors')
app.use(cors()
cors中间件底层原理如下
app.use((req, res, next) => {//任何请求都会进入这个use中间件
res.setHeader('Access-Control-Allow-Origin', '*')//设置响应头
next()//执行下一个中间件 })
2.跨域解决方案二：原生jsonp
通过动态创建script标签,通过script标签的src,向一个不同源的接口发送一个get请求
src属性发送请求时，在参数中额外携带一个callback的参数，参数值是一个在页面中预先定于好的函数名
callback属性值：预先定义的函数名，这个函数必须要在script标签之前定义
服务器接收到请求之后，获取callback的参数值
服务器将要响应的数据拼接成 函数调用格式，通过传参的方式将响应数据返回给浏览器
注意:JSONP只支持get请求，不支持post
3.跨域解决方案三： jQuery中的jsonp
只需要一行代码
dataType:'jsonp'
底层原理与原生一致，设置dataType为jsonp，jq会自动动态帮我们创建一个script标签，将url放到src属性中
细节注意点：jq使用jsonp不需要自己设置callback，jq会自动帮我们发送callback参数，参数值就是jq的success回调函数
4.跨域解决方案四：谷歌浏览器设置跨域
跨域是浏览器的一个安全限制,我们可以通过修改一些设置，让被设置的浏览器没有这个同源的限制,自然可以实现跨域
5.区别
最后的最后总结一下SONP与CORS的区别
1.CORS：
服务器返回响应头，前端无需任何处理
简单快捷，支持所有请求方式
2.JSONP
浏览器：自定义响应回调函数，使用script标签的src请求
利用浏览器的src属性没有跨域这一限制特点
服务器：接收callback参数，返回函数调用
处理复杂，并且只支持get请求
原因：get请求参数直接在url后面拼接，而post请求参数是放在请求体中文章来源：https://www.toymoban.com/news/detail-571191.html
未完待续…文章来源地址https://www.toymoban.com/news/detail-571191.html
到了这里，关于跨域的五种解决方案详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
