彻底解决跨域请求问题+实现思路及相关解决方案(cros ...)

我们在做前后端数据交互或是做前后端分离项目时，经常会碰到请求跨域，什么是跨域请求呢，这要先从同源策略说起，最初是由Netscape 公司将此策略引入浏览器。 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源，也是浏览器对javascript施加的安全限制，所以类似ab.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的,因为域名不同。同源策略限制了脚本（js）跨网站发请求，可发请求但是拿不到响应。一个源要求:

协议(http/https)+IP（或域名）+端口都一致，就是同一个源。

但也有些不受同源策略限制，主要有 a标签、img 标签，重定向、form表单的提交，script、link，iframe标签等不受同源策略的限制，可以引用其他站点内容。

跨域要解决不同源之间发起请求、请求数据、发送数据、通信等交互问题的问题。

解决方案：

1. 修改浏览器的设置，解除同源策略限制。

我觉得此种方式只适合开发临时调试等。例如chrome浏览器的跨域设置。在属性页面中的目标输入框里加上 --disable-web-security 。此种方式限于版本号49之前，之后的步骤会多一些，版本号49之前设置如图：

2.ajax 的jsonp方式处理跨域

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。JSONP实现跨域请求的原理简单的说，就是动态创建script标签，然后利用script的src不受同源策略约束来跨域获取数据。但是使用JSONP只支持GET，不支持POST请求。此种方式在开放API中起到非常重要的作用。

使用jQuery封装的$.ajax中有一个dataType属性，如果将该属性设置成dataType:"jsonp"，就能实现JSONP跨域了。

			 $.ajax({
 async : true,
 url : "https://api.a.com/v1/book/search",
 type : "GET",
 dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
 jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
 jsonpCallback: 'handleResponse', //设置回调函数名
 data : {
 q : "javascript", 
 count : 1
 }, 
 success: function(response, status, xhr){
 console.log('状态为：' + status + ',状态是：' + xhr.statusText);
 console.log(response);
 }
 });

3.使用反向代理功能解决跨域问题

使用nginx做请求转发，配置：

修改:/usr/local/etc/nginx/vhosts/xx.com.conf

			server {
 listen 80;
 server_name xx.com 12.12.12.12;
 location / {
 add_header 'Access-Control-Allow-Origin' '*';
 add_header 'Access-Control-Allow-Credentials' 'true';
 add_header 'Access-Control-Allow-Methods' '*';
 proxy_pass http://localhost:8088;
 # proxy_redirect off ;
 index index.php index.html index.htm;
 }
 
 }

4.使用nodejs中间件代理解决跨域问题

var express = require('express');

var proxy = require('http-proxy-middleware');var app = express();app.use('/', proxy({ target: 'http://www.a.com', changeOrigin: true }));app.listen(3000);

5.使用CORS方式解决跨域问题

Cross-Origin Resource Sharing（CORS）跨域资源共享是一份浏览器技术的规范，是一个W3C标准，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。一些老旧浏览器如IE6,IE7,Opera min 不支持CORS.服务器端对于CORS的支持，是通过设置Access-Control-Allow-Origin来进行的。

如果使用springboot 框架，可配置

@Configuration

public class MyWebAppConfigurer extends WebMvcConfigurerAdapter{

@Override

public void addCorsMappings(CorsRegistry registry) {

registry.addMapping("/**");

}

如果是springcloud 框架，可配置：

CORS 并不是为了解决服务端安全问题，而是为了解决如何跨域调用资源。至于如何设计出 安全的开放API，却是另一个问题了，这里提下一些思路：比如请求时间有效性 ，token验证ip验证和来源验证等。