跨域解決方案（史上最易懂）

wh469012917 發布于2019-07-25 14:23 / 3033人閱讀

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

跨域總結 1.跨域思路

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

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 就不存在跨域

反向代理就是截取 /api 之后的請求轉發到http://www.douban.com/ 服務器上

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

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

1.2 后端解決方案

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

jsonp 回調函數

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

2.本地配置nginx解決跨域 2.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 為你設置的共享目錄

2.2 配置nginx 2.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;
}

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

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

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

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

解決Nginx出現403 forbidden

相當良心的解決方案

2.2.3 配置反向代理

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

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

2.3 測試跨域




    
    
    Title

2.4 瀏覽器測試跨域，跨域成功 跨域總結 1.跨域思路