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 形式返回。