后端設置跨域

跨域

產生跨域問題的罪魁禍首是瀏覽器同源策略，當協議、子域名、主域名、端口號中任意一個不相同時，都算作不同域，不同域之間的網絡請求就會觸發跨域問題。跨域並不是請求發不出去，請求能發出去，服務端能收到請求並正常返回結果，只是結果被瀏覽器攔截了。

解決方法

前后台分離模式目前主流解決方案有三種：

• webpack proxy：僅開發模式有效，打包后會失效。
• cors：開發和生產環境都可以用。
• nginx： 僅生產環境可用。

本文主要講的是 cors 方式，需要前后台進行配合。

前台

前台使用 vue-admin-template 腳手架，網絡請求使用 Axios。Axios 是一個基於 promise 的 HTTP 客戶端，可以發送 get、post 請求。

找到項目中 Axios 封裝的文件，在 Axios 創建時增加屬性  withCredentials: true ：

    const service = axios.create({
        baseURL:  process.env.VUE_APP_BASE_API,
        withCredentials:  true,
        timeout:  5000
    })

后台

后台新建 CorsConfig，統一配置全局跨域請求。

創建配置為，會被容器進行掃描。(目錄：com/imooc/config/CorsConfig.java)

想被容器掃描到就需要加注解@Configuration

package com.imooc.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    public CorsConfig() {
    }

    @Bean
    public CorsFilter corsFilter() {
        // 1. 添加cors配置信息
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("http://localhost:8080");
        config.addAllowedOrigin("http://shop.z.mukewang.com:8080");
        config.addAllowedOrigin("http://center.z.mukewang.com:8080");
        config.addAllowedOrigin("http://shop.z.mukewang.com");
        config.addAllowedOrigin("http://center.z.mukewang.com");
        config.addAllowedOrigin("*");

        // 設置是否發送cookie信息
        config.setAllowCredentials(true);

        // 設置允許請求的方式
        config.addAllowedMethod("*");

        // 設置允許的header
        config.addAllowedHeader("*");

        // 2. 為url添加映射路徑
        UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
        corsSource.registerCorsConfiguration("/**", config);

        // 3. 返回重新定義好的corsSource
        return new CorsFilter(corsSource);
    }

}

/**代表請求進來適合所有的路由

返回CorsFilter對象，里面的參數實就事CorsConfigurationSource

二、前端這里也設置了 攜帶cookie信息為true。