跨域解決方案（易懂，持續(xù)更新中……）

wupengyu 發(fā)布于2019-07-25 14:24 / 2767人閱讀

摘要：跨域總結跨域思路跨域解決方案一般分為兩種前端解決，后端解決前端解決方案通過前端解決的思想就是，通過設置中間件把跨域的請求轉發(fā)一下，其實就是反向代理，比如想要訪問豆瓣的接口很，但是如果請求的是就不存在跨域反向代理就是截取之后重寫請求將請求轉發(fā)

跨域總結 1.跨域思路

跨域解決方案一般分為兩種：前端解決，后端解決

1.1 前端解決方案

通過前端解決的思想就是，通過設置中間件把跨域的請求轉發(fā)一下，其實就是反向代理，比如 http://1.2.3.4:8099 想要訪問豆瓣的接口
http://www.douban.com/v?a=1很...，但是如果請求的是http://1.2.3.4:8099/api/v?a=1 就不存在跨域

反向代理就是截取 /api 之后重寫請求將請求轉發(fā)到http://www.douban.com/ 服務器上

疑問后續(xù)更新：關于轉發(fā)，到底是幾次請求

vue react等項目可以使用 http-proxy-middleware

普通項目就是以下介紹的本地安裝nginx 反向代理跨域

1.2 后端解決方案

后端解決方案，一般是需要后端參與

jsonp 回調(diào)函數(shù)

CORS 需要后端加頭部但并不是所有瀏覽器都支持

純后端配置nginx反向代理解決跨域

以下介紹

前端解決方案：http-proxy-middleware

后端解決方案：nginx 反向代理

2.前端跨域解決方案 http-proxy-middleware 2.1 搭建環(huán)境

# vue-cli 腳手架 
# 安裝axios 和 跨域支持的包 http-proxy-middleware
npm i axios --save-dev
npm install --save-dev http-proxy-middleware
#vue-cli 已經(jīng)把http-proxy-middleware寫在項目依賴里面了

2.2 正常請求存在跨域

# 在豆瓣API上隨便找一個接口做測試，以一下接口為例
https://api.douban.com/v2/book/1220562

下圖瀏覽器訪問接口請求成功

Snip20180806_8.png

下圖 vue項目中請求接口

Snip20180806_14.png

下圖代碼中訪問接口存在跨域

Snip20180806_9.png

2.3 使用http-proxy-middleware

下圖使用http-proxy-middleware,配置 config/index.js

Snip20180806_11.png

下圖跨域成功

Snip20180806_10.png

3.后端跨域解決方案本地配置nginx解決跨域 3.1 mac/vmware/設置共享文件

在虛擬機上找到設置，選擇共享文件夾

mac vmware想使用共享文件必須安裝vmware-tools

2.1 在虛擬機關閉狀態(tài)下，選擇虛擬機，安裝vmware-tools
2.2 在ubuntu中直接使用 apt 安裝之后會介紹

安裝vmware-tools之后查看 mnt文件下是否有hgfs文件

3.1 有hgfs說明已經(jīng)有共享文件的掛載點
3.2 如果沒有hgfs文件說明安裝的vm-tools可能和ubuntu版本有沖突

設置共享目錄

# 查看當前設置的共享文件
#sudo vmware-hgfsclient

# 上述命令可能由于沒有安裝包報錯，所以先安裝一下包
# apt-get install open-vm-tools
# apt-get install open-vm-tools-desktop
# apt-get install open-vm-tools-dkms

# 自己手動創(chuàng)建hgfs并掛載
# mkdir /mnt/hgfs
# vmhgfs-fuse .host:/ /mnt/hgfs

# 使用文件查看是否有權限進入 /mnt/hgfs 如果沒有使用一下命令
# sudo vmhgfs-fuse .host:/ /mnt/hgfs -o allow_other -o nonempty

# 每次進入系統(tǒng)都需要自己mount 可以配置/etc/fstab

.host:/    /mnt/hgfs       vmhgfs     defaults  0  0

完成以上步驟，你會發(fā)現(xiàn) /mnt/hgfs/XXX XX 為你設置的共享目錄

3.2 配置nginx 3.2.1 修改nginx默認服務器根目錄

修改配置文件位置：vim /etc/nginx/sites-available/default

location / {
    # 配置共享文件的位置
    root /mnt/hgfs/ftp;

    # First attempt to serve request as file, then
    # as directory, then fall back to displaying a 404.
    try_files $uri $uri/ =404;
}

3.2.2 訪問http://XXX 查看配置是否生效（403錯誤）

403錯誤可能有兩種情況，不要誤以為真的沒有權限

配置的共享文件下是否有indx.html，沒有的話會報錯403 Forbidden

真的沒有權限需要修改一下配置 chrod 修改權限

解決Nginx出現(xiàn)403 forbidden

相當良心的解決方案

3.2.3 配置反向代理

我用的豆瓣隨便的一個接口來測試的

location /api{
    # 重寫
    rewrite  ^.+api/?(.*)$ /$1 break;
    # 配置代理
    proxy_pass   https://api.douban.com;
}

3.3 測試跨域




    
    
    Title

3.4 瀏覽器測試跨域，跨域成功

Snip20180805_4.png

Snip20180805_5.png

Snip20180805_6.png

Snip20180805_7.png

參考

安裝vmtools之后在/mnt目錄下沒有hgfs文件夾

vmware設置共享文件夾

虛擬機找不到/mnt/hgfs掛載目錄

GPU云服務器云服務器 js跨域解決方案跨域解決辦法 js ajax跨域解決方案 js跨域訪問js解決方案

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

轉載請注明本文地址：http://systransis.cn/yun/40063.html

網(wǎng)站部署

摘要：就鹿晗宣布戀情導致微博宕機事件淺談大型網(wǎng)站高可用性架構中午吃飯刷著刷著微博發(fā)現(xiàn)微博突然掛了。用戶在使用瀏覽器訪問一個網(wǎng)站時需要先通過協(xié)議向服務器發(fā)送請求，之后服務器返回文件與響應信息。 webpack：從入門到真實項目配置自從出現(xiàn)模塊化以后，大家可以將原本一坨代碼分離到個個模塊中，但是由此引發(fā)了一個問題。每個 JS 文件都需要從服務器去拿，由此會導致加載速度變慢。Webpack 最主...

endless_road 2019-06-24 17:57 評論0 收藏0
優(yōu)秀文章收藏（慢慢消化）持續(xù)更新~

摘要：整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學習原文協(xié)作規(guī)范中文技術文檔協(xié)作規(guī)范阮一峰編程風格凹凸實驗室前端代碼規(guī)范風格指南這一次，徹底弄懂執(zhí)行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學習原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 評論0 收藏0
前端基礎入門

摘要：手把手教你做個人火的時候，隨便一個都能賺的盆滿缽滿，但是，個人沒有服務端，沒有美工，似乎就不能開發(fā)了，真的是這樣的嗎秘密花園經(jīng)典的中文手冊。涵蓋前端知識體系知識結構圖書推薦以及入門視頻教程，全的簡直不要不要的了。 JavaScript 實現(xiàn)點擊按鈕復制指定區(qū)域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實現(xiàn)點擊按鈕復制區(qū)域文本的功能，不需要依賴 flash。...

shinezejian 2019-08-22 13:51 評論0 收藏0
跨域解決方案（史上最易懂）

摘要：跨域總結跨域思路跨域解決方案一般分為兩種前端解決，后端解決前端解決方案通過前端解決的思想就是，通過設置中間件把跨域的請求轉發(fā)一下，其實就是反向代理，比如想要訪問豆瓣的接口很會有跨域問題，但是如果請求的是就不存在跨域反向代理就是截取之后的請求跨域總結 1.跨域思路跨域解決方案一般分為兩種：前端解決，后端解決 1.1 前端解決方案通過前端解決的思想就是，通過設置中間件把跨域的請求轉發(fā)...

wh469012917 2019-07-25 14:23 評論0 收藏0
通俗易懂講解跨域的前世今生

摘要：把數(shù)據(jù)包裹在一個客戶端聲明的本地的回調(diào)函數(shù)中，這樣可以動態(tài)加載一個跨域服務器數(shù)據(jù)。在本地聲明這個動態(tài)中的回調(diào)函數(shù)名稱，并且定義該函數(shù)，然后通過參數(shù)傳遞到服務器。為什么要跨域我們都知道在瀏覽器地址欄輸入地址的時候可以隨便訪問一個頁面，但是如果你在ajax請求中發(fā)出一個xhr請求那么因為瀏覽器安全策略只有同源的服務器才能處理。這就是同源策略要求協(xié)議/域名/端口三者完全一致才能訪問 ...

Michael_Lin 2019-08-20 16:10 評論0 收藏0