今天學(xué)習(xí)的兩個(gè)知識(shí)點(diǎn)

alanoddsoff 發(fā)布于2019-08-20 14:27 / 887人閱讀

摘要：調(diào)試遇到的前后端跨域問(wèn)題在學(xué)習(xí)筆記對(duì)象介紹和學(xué)習(xí)筆記實(shí)現(xiàn)跨域資源共享以及和的對(duì)比跨域方式中，我對(duì)對(duì)象實(shí)現(xiàn)給出了較為全面的總結(jié)，并且對(duì)同源策略以及跨域訪問(wèn)給出了常見(jiàn)的解決方案使用和頭部信息實(shí)現(xiàn)跨域資源共享。

調(diào)試TCMngr遇到的前后端跨域問(wèn)題

在《AJAX學(xué)習(xí)筆記1：XHR對(duì)象介紹》和《AJAX學(xué)習(xí)筆記2：XHR實(shí)現(xiàn)跨域資源共享（CORS）以及和JSONP的對(duì)比》《JavaScript跨域方式》中，我對(duì)XHR對(duì)象實(shí)現(xiàn)AJAX給出了較為全面的總結(jié)，并且對(duì)同源策略以及跨域訪問(wèn)給出了常見(jiàn)的解決方案：使用JSONP和HTTP頭部信息實(shí)現(xiàn)跨域資源共享。在TCM項(xiàng)目中，后臺(tái)數(shù)據(jù)通過(guò)線上接口提供，也就是實(shí)現(xiàn)了跨域，在配置中通過(guò)Nodejs+express API實(shí)現(xiàn)了跨域，代碼如下：

        var express = require("express"),
            app = express();
        //允許跨域訪問(wèn)
        app.all("*",function (req, res, next) {
            res.header("Access-Control-Allow-Origin", "*");
            res.header("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild");
            res.header("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
        
            if (req.method == "OPTIONS") {
                res.send(200);
            }
            else {
                next();
            }
        });

雖然通過(guò)設(shè)置頭部信息允許跨域，但是實(shí)際開(kāi)發(fā)中依舊難以實(shí)現(xiàn)跨域，因此考慮改變?yōu)g覽器設(shè)置消除同源策略，以下是網(wǎng)上看到的方法，親測(cè)可用。

由于瀏覽器通過(guò)XHR對(duì)象實(shí)現(xiàn)Ajax通信一般受到同源策略限制，因此在Chrome中訪問(wèn)線上接口時(shí)會(huì)遇到跨域限制，一種簡(jiǎn)單的解決方式是通過(guò)命令行方式打開(kāi)Chrome瀏覽器，設(shè)置不開(kāi)啟跨域限制：
通過(guò)win+R打開(kāi)窗口并輸入cmd打開(kāi)命令行窗口，輸入如下命令：

    "C:UsersUserNameAppDataLocalGoogleChromeApplicationchrome.exe" --disable-web-security --user-data-dir

chrome地址可以通過(guò)右鍵Chrome圖標(biāo)-->屬性找到，切記使用該命令前關(guān)閉Chrome瀏覽器。

針對(duì)不同操作系統(tǒng)的不同命令方式：

    // mac  chrome 瀏覽器
    open -a "Google Chrome" --args --disable-web-security  --user-data-dir
    // mac  safari 瀏覽器 
    open -a "/Applications/Safari.app" --args --disable-web-security --user-data-dir 
    //linux
    chromium-browser --disable-web-security