我们在做前后端数据交互或是做前后端分离项目时，经常会碰到请求跨域，什么是跨域请求呢，这要先从同源策略说起，最初是由Netscape 公司将此策略引入浏览器。 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源，也是浏览器对javascript施加的安全限制，所以类似ab.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的,因为域名不同。同源策略限制了脚本（js）跨网站发请求，可发请求但是拿不到响应。一个源要求:
协议(http/https)+IP（或域名）+端口都一致，就是同一个源。
但也有些不受同源策略限制，主要有 a标签、img 标签，重定向、form表单的提交，script、link，iframe标签等不受同源策略的限制，可以引用其他站点内容。
跨域要解决不同源之间发起请求、请求数据、发送数据、通信等交互问题的问题。
解决方案：
- 修改浏览器的设置，解除同源策略限制。
我觉得此种方式只适合开发临时调试等。例如chrome浏览器的跨域设置。在属性页面中的目标输入框里加上 --disable-web-security 。此种方式限于版本号49之前，之后的步骤会多一些，版本号49之前设置如图：
chrome浏览器跨域设置
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验证和来源验证等。
