Springboot+Reactプロジェクトのドメイン間アクセスの問題

一、開発環境

フレーム:springboot 1.5.10.RELEASE

開発ツール:IDEA

JDK:1.8

フロントエンドフレーム:React 15.6.1

ブラウザ:Chromeブラウザ

二、ドメイン間問題
ローカルでajaxを使用してlocalhostにアクセス:8080ポートタイムズエラー:
Failed to load http://localhost:8080/test/test.do: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.
ReactはSpringbootの前後端から分離され、Reactポートは3000、Springbootポートは8080であり、ポート間アクセスは通常のajaxではドメイン間アクセスできない.
ドメイン間とは?
クライアントがサーバにネットワーク要求を開始すると、urlにはプロトコル、ドメイン名、ポート番号の3つの主要な情報が含まれます.3つの部分がサーバと同じ場合、同じソースに属します.しかし、1つの違いがあれば、ドメイン間呼び出しを構成するものに属する.同源ポリシーによって制限されます.
同源ポリシーは、あるソースからロードされたドキュメントまたはスクリプトが、別のソースからのリソースとどのように対話するかを制限します.これは、潜在的な悪意のあるファイルを分離するための重要なセキュリティメカニズムです.ブラウザの同源ポリシーでは、JavaScriptなどのクライアント・スクリプトが異なるドメインのサービスに対してクロスステーション・コールを行うことは、クロスステーション・スクリプトの攻撃を防ぐために禁止されています(通常、XMLHttpRequestリクエストを使用することを意味します).
三、解決方法
(1)javaバックエンドフィルタcrosを実現する:
バックエンドにフィルタを設定するCrosFilter

public class CorsFilter implements Filter {

    public void init(FilterConfig filterConfig) throws ServletException {
    }

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
        throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");//         ，    cookie  ，             ，
        httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        httpResponse.setHeader("Access-Control-Allow-Methods", "GET, PUT, DELETE, POST");//         
        /**
         * ajax         xhrFields:{withCredentials:true}，
         *                     Access-Control-Allow-Credentials        
         */
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//    Cookie  
        httpResponse.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); //   HTTP 1.1.
        httpResponse.setHeader("Pragma", "no-cache"); //   HTTP 1.0. response.setHeader("Expires", "0");
        chain.doFilter(request, response);
    }

    public void destroy() {
        // TODO Auto-generated method stub
    }
}

参考:クロスドメインリソース共有CORSの詳細-チェン一峰
(2)プロキシサーバによるドメイン間アクセス:dev.jsで構成

devServer: {
            port: '3000',//    
            host: '127.0.0.1',//    
            historyApiFallback: false,
            disableHostCheck: true,
            noInfo: false,
            stats: 'minimal',
            inline: true,
            //           (HMR)
            hot: true,
            //     output  “publicPath”     
            publicPath: context,
            proxy: {
                '/mytest/*': {
                    target: "http://localhost:8080",//      
                    secure: false,
                    changeOrigin: true
                }//  Controller Requestmapping           
                ,'/test/*': {
                    target: "http://localhost:8080",
                    secure: false,
                    changeOrigin: true
                }
            }