前后端分离需要跨域怎么办

原理什么的这里不多说，网上太多了。

为什么会产生跨域

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

什么情况下会产生跨域

页面地址	接口地址	是否会产生跨域	原因
http://www.ccc.com/index	http://www.ccc1.com	否	同源
http://www.ccc.com/index	https://www.ccc1.com	是	协议不同
http://www.ccc.com/index	http://www.bbb.com	是	域名不同
http://www.ccc.com/index	http://www.ccc1.com:8888	是	端口不通

原则原则当一个请求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: {}
});


//Vue中实现：
this.$http.jsonp(' http://www.bbb.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

方法三

使用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中进行配置，注意部署时，要和接口地址同源，可参照方式一。

                                 

总结

跨域跨域是因为不在同一域下，所以要保证一个原则，就是想办法将两个或多个域名映射到同一域下。

                                                                                 

                                                                                  欢迎扫码关注公众号