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

時間 2019-11-07

標籤解決方案易懂持續更新简体版

原文原文鏈接

跨域總結

1.跨域思路

跨域解決方案通常分爲兩種：前端解決，後端解決javascript

1.1 前端解決方案

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

反向代理就是截取 /api 以後重寫請求將請求轉發到http://www.douban.com/ 服務器上前端

疑問後續更新：關於轉發，究竟是幾回請求vue

vue react等項目可使用 http-proxy-middleware
普通項目就是如下介紹的本地安裝nginx 反向代理跨域

1.2 後端解決方案

後端解決方案，通常是須要後端參與java

jsonp 回調函數
CORS 須要後端加頭部但並非全部瀏覽器都支持
純後端配置nginx反向代理解決跨域

如下介紹react

前端解決方案：http-proxy-middleware
後端解決方案：nginx 反向代理

2.前端跨域解決方案 http-proxy-middleware

2.1 搭建環境

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

2.2 正常請求存在跨域

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

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

Snip20180806_8.png
jquery

下圖 vue項目中請求接口

Snip20180806_14.png
ios

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

Snip20180806_9.png
nginx

2.3 使用http-proxy-middleware

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

Snip20180806_11.png
ajax

下圖跨域成功

Snip20180806_10.png

3.後端跨域解決方案本地配置nginx解決跨域

3.1 mac/vmware/設置共享文件

在虛擬機上找到設置，選擇共享文件夾
mac vmware想使用共享文件必須安裝vmware-tools
2.1 在虛擬機關閉狀態下，選擇虛擬機，安裝vmware-tools
2.2 在ubuntu中直接使用 apt 安裝以後會介紹
安裝vmware-tools以後查看 mnt文件下是否有hgfs文件
3.1 有hgfs說明已經有共享文件的掛載點
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

# 本身手動建立hgfs並掛載
# mkdir /mnt/hgfs
# vmhgfs-fuse .host:/ /mnt/hgfs

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

# 每次進入系統都須要本身mount 能夠配置/etc/fstab

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

完成以上步驟，你會發現 /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出現403 forbidden

至關良心的解決方案

3.2.3 配置反向代理

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

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

3.3 測試跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery.js"></script>
    <title>Title</title>
</head>
<body>
<div>
    <button id="btn1">測試跨域</button>
    <div id="content"></div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btn1").click(function () {
            // 全部豆瓣請求都以 /api 開始  注意相對絕對路徑
            $.get("/api/v2/book/1220562", function (data, status) {
                alert("數據: " + JSON.stringify(data) + "\n狀態: " + status);
                $("#content").html(JSON.stringify(data))
            });
        });
    });
</script>
</body>
</html>