JS 跨域请求

 

JS 跨域请求

【什么是跨域】

当浏览器请求的目标地址(接口)与请求发出地的 ip 、端口、协议不同时,请求将会出错。

例如:“No 'Access-Control-Allow-Origin' header is present on the requested resource”;

如果只在前台做了跨域处理,那么浏览器可能提示 “Uncaught SyntaxError: Unexpected token :”错误。

【为什么有跨域限制】

为了防止CSRF攻击。【知乎解释

【常见的解决方法】

1. jsonp 方式

        前台:使用 jQuery 发送 Ajax 请求时加上 jsonp 字段,该字段对应的值为后台返回的回调函数的名称,这个名称需要前后台约定好,比如 jsonp:"callback"。

        后台:返回数据时,使用回调函数名称加括号包裹原来需要返回的数据。比如,返回的数据为 "success" 字符串,那么最终返回的结果为 “callback(success)"。

2. 服务器代理

        服务器后台请求不存在跨域问题,可以通过前台请求“同域”后台的接口,在接口中再调用需要请求的链接。

3. 跨域资源共享(Cross-origin resource sharing)

        前台:将 xhr (XMLHttpRequst) 属性withCredentials为true。

        后台:在 response headers 中设置 Access-Control-Allow-Origin,其值为允许跨域访问的 ip 和端口。比如:“http://127.0.0.1:80”; 同时设置 Access-Control-Allow-Credentials 为 true,这样允许把 cookie 携带至服务器。

4. 前台设置 domain.name 等等......解决方案还有很多

        此次遇到的跨域问题是通过服务器代理解决的。因为需要调用的接口是属于公司的公共服务接口,而多数跨域解决方法需要前后台同时修改。考虑到公共接口做特殊修改存在风险,因此这里通过开发后台接口,在接口中调用前台所需调用的地址,再将数据以 json 形式返回。

猜你喜欢

转载自getthrough.iteye.com/blog/2419788