一之濑双叶的博客

思考跨域问题

2018/01/27

什么是跨域问题?

跨域就是指浏览器不能执行其他网站的脚本,这是由浏览器的同源策略造成的,是javascript的安全限制

一个域名地址是由:

http://(请求头) www(子域名) . cuijahuan(主域名) : 8080(端口号) / script/jquery.js(请求资源地址) 组成的

而同源,就是指域名,协议,端口均相同

当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域

而不同域之间的相互请求资源,就是跨域
比如http://cuijiahuan.xyz 请求 http://jiahuan.xyz

解决方法

1、使用ajax的JSONP

首先要了解JSONP只支持GET请求,不支持POST请求

ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性可以访问跨域的js脚本,因此,服务器不再返回JSON格式的数据,而是返回一段调用某个函数的JS代码,在src中进行了调用,实现了跨域。

还没有看jsonp,目前我只知道要在ajax里面引入
type:"get", // 接收服务器数据的类型
dataType:"jsonp", // 用于服务器端的获取函数的参数
jsonp:"callback", // 函数名称

2、使用jquery的jsonp插件

首先我们要引入相关的js文件,相关下载可参考该地址

在我们前端代码中需要在ajax里的url下加入

callbackParameter:"callback"
callback:"callback_success"

使用该方法不局限于get请求,还可以是post请求,但从服务器获取到的依然是jsonp格式

第三种方法是使用cors方法,具体可以参考网上其他博客


附:在项目中我解决跨域问题没有用到jsonp,是通过后台修改来实现的,在前端ajax里面需要加上一句语句

xhrFields: {withCredentials: true}

这句是提供了请求发送凭证的支持

CATALOG
  1. 1. 什么是跨域问题?
  2. 2. 解决方法