前後端分離需要跨域怎麼辦

原理什麼的這裏不多說，網上太多了。

爲什麼會產生跨域

出於瀏覽器的同源策略限制。同源策略（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中進行配置，注意部署時，要和接口地址同源，可參照方式一。

                                 

總結

跨域跨域是因爲不在同一域下，所以要保證一個原則，就是想辦法將兩個或多個域名映射到同一域下。

                                                                                 

                                                                                  歡迎掃碼關注公衆號