跨域問題 No 'Access-Control-Allow-Origin' header is present on the requested resourc

1.報錯信息

剛學習nginx+tomcat+spring+vue配置項目代理，在公司window7啓動沒有問題，可是在家裏window10不行，始終報No 'Access-Control-Allow-Origin' header is present on the requested resource.錯誤

搞了4天晚上仍是沒想明白，全部的配置都是同樣，爲何不行呢？心態當時已經崩了……，可是仍是想弄清楚爲何，因而作以下嘗試：

2 分析報錯緣由：

2.1.nginx配置文件問題

解決方案:在nginx.conf添加以下代碼

server {
        listen       8010;
        server_name  localhost;
        location / {
             root C:/Users/admin/Documents/;#根目錄
			autoindex on;       #開啓nginx目錄瀏覽功能
			autoindex_exact_size off;   #文件大小從KB開始顯示
			charset utf-8;          #顯示中文
			add_header 'Access-Control-Allow-Origin' '*'; #容許來自全部的訪問地址
             add_header 'Access-Control-Allow-Credentials' 'true';
             #支持請求方式
             add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; 
             add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
        }

    }
複製代碼

2.2.web項目Java代碼問題

解決方案：在實現攔截器HandlerInterceptor的類裏面配置請求頭過濾參數，代碼以下:

@Override 
public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception {
        httpServletRequest.setCharacterEncoding("UTF-8");
        httpServletResponse.setCharacterEncoding("UTF-8");
        httpServletResponse.setHeader("Access-Control-Allow-Origin","*");
        httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type");
        httpServletResponse.setHeader("Access-Control-Allow-Methods","POST,OPTIONS,GET");
        return true;
    }
複製代碼

2.3.前端Vue設置過濾請求頭問題

解決方案：在config.js裏面配置以下代碼

const myaxios = axios// 不跨域的axios
  	   // 若是要跨域的話, 對axios進行一些設置,當前使用的是跨域的
  	const axiosInstance = axios.create({
  	    headers: {'Content-Type': 'application/json;charset=utf-8'},// 設置傳輸內容的類型和編碼
  	    withCredentials: true,// 指定某個請求應該發送憑據。容許客戶端攜帶跨域cookie，也須要此配置
  	});
複製代碼

but 前面三種方案添加了，也沒有處理到問題，最後找到是web.xml的配置問題，蒼天啊，大地，終於找到解決辦法了，因此說解決問題仍是應該多嘗試，多百度，多問大佬，再次特別感謝三哥這位大佬支持!

3 解決問題

3.1 方法一

在tomcat安裝目錄下面\conf\web.xml添加以下代碼大概在590行（在這裏配置至關於全局參數，會影響全部加載在這個tomcat下的web項目）

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

複製代碼

3.2 方法二

在自己的web項目的web.xml文件加以下代碼(推薦第二種)

<!--CORS 跨域資源訪問-->
 <filter>
        <filter-name>CorsFilter</filter-name>
        <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
             <!--CORS 跨域容許的方法-->
        <init-param>
            <param-name>cors.allowed.methods</param-name>
            <param-value>GET,POST,DELETE,PUT</param-value>
        </init-param>
         <!--CORS 跨域容許的來源-->
        <init-param>
            <param-name>cors.allowed.origins</param-name>
            <param-value>*</param-value>
        </init-param>
         <!--CORS 跨域容許的請求頭-->
        <init-param>
            <param-name>cors.allowed.headers</param-name>
            <!--注意，若你的應用中不僅有這些文件頭，則須要將你應用中須要傳的文件頭也加上； 例如：個人應用中須要在header中傳token，因此這裏的值就應該是下面的配置，在原有基礎上將token加上，不然，應用就不會被容許調用 <param-value>token,Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value> -->
            <param-value>token,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

複製代碼

最後發現tomcat在公司的版本和家裏的不同，還有就是web項目的web.xml少加了一段以下代碼

<init-param>
            <param-name>cors.allowed.origins</param-name>
            <param-value>*</param-value>
 </init-param>
複製代碼

仍在不斷學習，請各位大佬留言指正不對的地方