跨域的五种解决方案详解

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请求参数是放在请求体中

未完待续…

最后

深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

小编已加密：aHR0cHM6Ly9kb2NzLnFxLmNvbS9kb2MvRFVrVm9aSGxQZUVsTlkwUnc==出于安全原因，我们把网站通过base64编码了，大家可以通过base64解码把网址获取下来。