前后端分离-ajax跨域实现策略汇总

为什么会产生跨域

同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源就是两个页面或者前后端的两个地址具有相同的协议（protocol），主机（host）和端口号

什么情况下会产生跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同就会产生跨域

前后端项目中跨域的解决办法

方法一

• 场景：nginx+tomcat

  使用nginx代理，不改动任何前后端代码。

  配置demo如下

server {
		listen 80;
		server_name www.ccc.com;
		
		#接口地址服务
		location / {
			proxy_pass http://localhost:8886/app/;
			proxy_set_header   Host $host:80;
			proxy_read_timeout 2000;
			client_max_body_size    1000m;
			proxy_set_header   X-Forwarded-Scheme  $scheme;
			proxy_set_header   X-Real-IP   $remote_addr;
			proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
			proxy_set_header Via "nginx";
		}
		
		location /index{
			alias /home/dist; 
			expires  7d;
			index index.html;
			autoindex on;
		}
		
	}

• 方法二

使用JSONP，JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

//ajax实现：
$.ajax({
    url: 'http://www.bbb.com:8080/login’,
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

方法三
使用CORS，主要是服务端通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许浏览器进行跨域的访问。

该方式只需要在写接口的时候对需要开放跨域的接口进行配置，前端不需要进行配置就可以直接调用，使用方便，限制小，部署时也不需要担心是否同源问题，不局限于GET调用方式。

1、在spring mvc中可使用XML配置方式，demo如下，更多配置细节可自行百度：

 <mvc:cors>
        <mvc:mapping path="/**"
                     allowed-origins="*"
                     allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
                     allowed-headers="Content-Type, Access-Control-Allow-Headers,Access-Control-Allow-Methods,Access-Control-Allow-Origin
,Authorization, X-Requested-With"
                     exposed-headers="header1, header2"
                     allow-credentials="true" />
    </mvc:cors>

2、spring boot中配置demo如下，更多配置细节可自行百度

@Configuration
public class SwaggerConfig extends WebMvcConfigurationSupport {
 
    /**
     * 跨域设置
     *
     * @author
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "OPTIONS", "PUT")
                .allowedHeaders("Content-Type", "X-Requested-With", "accept", "Origin", "Access-Control-Request-Method",
                        "Access-Control-Allow-Headers","Authorization","timestamp","access-control-request-headers")
                .exposedHeaders("Access-Control-Allow-Origin", "Access-Control-Allow-Credentials")
                .allowCredentials(true).maxAge(3600);
    }
}

方法四

Vue本地进行跨域，在项目中config->index.js中进行配置，注意部署时，要和接口地址同源，可参照方式一。
config/index.js文件配置代理，找到proxyTable字段

proxyTable: {
      '/api': { // 请求的代称，写在Axios里的BaseUrl
        target: 'http://localhost:8083',  // 真实请求URl
        changeOrigin: true, // 允许跨域
        pathRewrite: {  // 替换，通配/api的替换成/
          '^/api': '/'
        }
      }

然后在Axios配置baseUrl为/api