$.ajax如何跨域访问?

罗健
  • 34

直接请求
clipboard.png

不支持跨域,报错了
clipboard.png

jsonp

clipboard.png

报错了

clipboard.png

错误点进来,是这样的形式报错

clipboard.png
看看接口调用情况,状态是200, 返回值也是有的

clipboard.png

现在我该怎么做? 在服务端不设置响应头的情况下,我如何请求这个api?

回复
阅读 2.3k
6 个回答
李昊天
  • 1.8k

浏览器是不支持跨域的,ajax请求的时候用jsonp,之后还要在你要在服务器端做处理才可以;
在服务器端加上header信息,

header('Access-Control-Allow-Origin: *'); //允许所有域名的脚本访问该资源。
header("Access-Control-Allow-Headers: token,Origin, X-Requested-With, Content-Type, Accept"); //表明允许跨域请求包含content-type头
header('Access-Control-Allow-Methods: POST,GET'); //请求方式

上面的回答是cors方式跨域
题主最后有结果但是没数据是因为jsonp方式要求返回js的object对象,而不是json
这是两种不同的方式

某熊猫桑
  • 16.1k

补充下,jsonp其实在跨域原理上跟js更近,它要求服务端返回一段带有object的js代码,然后利用js标签里的src默认没有跨域限制的特性(准确来讲是网页没配置csp的话没有跨域限制,但同时也牺牲了一部分安全性),用src来加载,这样就能获取到object里的数据了。同时,由于是和json一脉相承的js.object,jQ让代码看上去像是在加载json……(什么鬼)

CORS方式则要求服务端返回的时候要带个CORS头,标明允许跨域访问的域(当然也可以图省事用通配符*),但我个人觉得如果本域有能力控制后端的话,配置个转发代理是个更好的选择,因为这样前端就不存在跨域问题了。转发代理可以用Nginx做,另外可能在域名解析那里设置URL转发应该也行(最近刚发现的,万网有URL显式/隐式转发,不过还没试过)。

使用类似charles的代理工具吧,在开发的时候

跨域不管是jsonp还是Access-Control-Allow-Origin都需要服务端支持

Alex660
  • 4
新手上路,请多包涵

版本号49之后的chrome跨域设置
chrome的版本升到49之后,跨域设置比以前严格了,在打开命令上加--disable-web-security之后还需要给出新的用户个人信息的目录。众所周知chrome是需要用gmail地址登录的浏览器,登录后就会生成一个存储个人信息的目录,保存用户的收藏、历史记录等个人信息。49版本之后,如果设置chrome浏览器为支持跨域模式,需要指定出一个个人信息目录,而不能使用默认的目录,估计是chrome浏览器怕用户勿使用跨域模式泄露自己的个人信息(主要是cookie,很多网站的登录token信息都是保存在cookie里)。

具体做法为:

1.在电脑上新建一个目录,例如:C:MyChromeDevUserData

2.在属性页面中的目标输入框里加上 --disable-web-security --user-data-dir=C:MyChromeDevUserData,--user-data-dir的值就是刚才新建的目录。

3.点击应用和确定后关闭属性页面,并打开chrome浏览器。

再次打开chrome,发现有“--disable-web-security”相关的提示,说明chrome又能正常跨域工作了。

图片描述

宣传栏