前端跨域的解决方案

注:因为浏览器同源协议的存在,发送ajax请求时会有跨域的问题。

解决方案:只提供思路,具体代码不写出来了。

1、JSONP

实现跨域的原理是:利用script标签的天然跨域特性。

a、最经典的便是使用JQ来实现跨域,但是随着更多优秀的第三方框架的出现,利用JQ来实现跨域的需求已经越来越被替代了。

b、无论是哪种框架,当需要使用JSONP来实现跨域请求数据,都要后台配合,写好专门的JSONP请求数据的接口,如下:

Node中实现JSONP请求:

前端跨域的解决方案

c、JSONP只能使用GET的请求方式。

2、CORS:

通俗的原理是:后台需要设置好响应头,服务器允许特定域名或者所有域名均可以访问。

通过配置CORS后,get和post请求都可以,后台不用再另外写特定接口。

一个完整有效的响应头配置:

前端跨域的解决方案

3、服务器反向代理

原理:从自己的服务器向目标服务器发送请求,获取数据再返回给浏览器。

如果使用node做后台,可以下第三方包‘request’,来向目标服务器请求数据。

前端跨域的解决方案

前端跨域的解决方案