解決前端開發環境中的的跨域問題

Youngs 發布于2019-08-02 15:21 / 2610人閱讀

摘要：二解決思路知道是客戶端瀏覽器為了安全使用同源策略導致的，而服務端是沒有這個限制的，那我們就只能通過服務端進行跨域了。哈哈，這也是為啥后端和生產環境下比較少聽說跨域的問題，所以這里介紹開發環境中的幾種方法。

一、為什么會有跨越問題
是客戶端瀏覽器同源策略導致的，就是瀏覽器不允許不同源的站點相互訪問。試想一下要是沒有這個，那站點里的安全信息如cookie，賬號/密碼等是不是很容易被其它站點獲取。
二、解決思路
知道是客戶端瀏覽器為了安全使用同源策略導致的，而服務端是沒有這個限制的，那我們就只能通過服務端進行跨域了。不管是jsop,core，還是代理的方式，都是需要服務配合的。哈哈，這也是為啥后端和生產環境下比較少聽說跨域的問題，所以這里介紹開發環境中的幾種方法。
三、解決方案
1.完全交予后端解決，配值請求頭信息（core），前端什么都不用做,如express.js中配置如下，其它后端語言同理

app.all("*", function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By","3.2.1")
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

2.使用nginx反向代理，在配置文件nginx.conf中找到server{}對象，更改項目地址root和配置代理地址proxy_pass，這個方法適合前端靜態文件使用：

location / {
    root   D:/browseClient/dist;  #自己的前端項目地址
    index  index.html index.htm;
}
#解決跨域
location /api {                                # 自定義nginx接口前綴
    proxy_pass   http://127.0.0.1:3000;            # 后臺api接口地址
            proxy_redirect default;      
    #設置主機頭和客戶端真實地址，以便服務器獲取客戶端真實IP
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   
}

3.如果使用vue-cli搭建的項目，可以直接使用proxyTable模塊，項目框架已經集成，找到配置文件在/confif/index.j，如下配置

//代理配置表，在這里可以配置特定的請求代理到對應的API接口
proxyTable:{
    "/adv":{
        target:"http://127.0.0.1:3000",//需要訪問的服務器地址
        changeOrigin:true,//true為開啟代理
        pathRewrite:{
            "^/adv": "/"http://路徑的替換規則
        }
    }，
    "/user":{
        target:"http://127.0.0.1:3000",//訪問的服務器地址
        changeOrigin:true,//true為開啟代理
        pathRewrite:{
            "^/user": "/"http://路徑的替換規則
        }
    }
}

顯然，大部分情況我們不可能為每個api接口都在這加一個規則，所以更好的配置是：

proxyTable: {
    "**": {
        target: "http://127.0.0.1:3000",
        changeOrigin: true,   //允許跨域
    }
}

或者

proxyTable: [{
    context: ["/**"]，
    target: "http://127.0.0.1:3000"，
    changeOrigin: true,  //允許跨域
}]

是不是方便了很多
4.其它，如jsonp是通過接口回調的方式實現跨域，這個現在已經用的少了。window.postMessage() 是HTML5的一個接口，專注實現不同窗口不同頁面的跨域通訊。這些是對單個接口或者頁面層面的跨域，使用也簡單就不詳細說了。

云服務器 GPU云服務器前端開發環境關于安卓開發環境問題前端開發環境搭建跨域問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54075.html

那些年曾談起的跨域

摘要：在中，在不同的域名下面進行數據交互，就會遇到跨域問題，說到跨域首先要從同源說起，瀏覽器為了提供一種安全的運行環境，各個瀏覽器廠商協定使用同源策略。在上面說過是不受同源策略限制的，但是出于安全原因，瀏覽器限制從腳本內發起的跨源請求。對于前端開發來說跨域應該是最不陌生的問題了，無論是開發過程中還是在面試過程中都是一個經常遇到的一個問題，在開發過程中遇到這個問題的話一般都是找后端同學去解決...

galois 2019-08-23 18:13 評論0 收藏0
用 Nokitjs 解決前端開發中的跨域問題

摘要：用解決問題是一個，和等框架類似，用于開發應用或網站，這里不去比較各個框架的優劣，而是去解決跨域問題。問題在開發一些「單頁應用」時，通常會使用 Ajax 和服務器通訊，比如 RESTful API，通常「前端」和「服務端 API」可能是有不同人員在負責，也不在同一個工程下，那么開發過程中就可能會遇到跨域的問題，比如 Chrome 會在 console 中看到這樣的錯誤消息: XMLH...

voidking 2019-08-19 18:07 評論0 收藏0
用 Nokitjs 解決前端開發中的跨域問題

摘要：用解決問題是一個，和等框架類似，用于開發應用或網站，這里不去比較各個框架的優劣，而是去解決跨域問題。問題在開發一些「單頁應用」時，通常會使用 Ajax 和服務器通訊，比如 RESTful API，通常「前端」和「服務端 API」可能是有不同人員在負責，也不在同一個工程下，那么開發過程中就可能會遇到跨域的問題，比如 Chrome 會在 console 中看到這樣的錯誤消息: XMLH...

fobnn 2019-08-01 15:11 評論0 收藏0
javasscript - 收藏集 - 掘金

摘要：跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題...

Rango 2019-08-20 17:15 評論0 收藏0