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

wh469012917 發(fā)布于2019-07-25 14:23 / 3044人閱讀

摘要：跨域總結(jié)跨域思路跨域解決方案一般分為兩種前端解決，后端解決前端解決方案通過(guò)前端解決的思想就是，通過(guò)設(shè)置中間件把跨域的請(qǐng)求轉(zhuǎn)發(fā)一下，其實(shí)就是反向代理，比如想要訪問(wèn)豆瓣的接口很會(huì)有跨域問(wèn)題，但是如果請(qǐng)求的是就不存在跨域反向代理就是截取之后的請(qǐng)求

跨域總結(jié) 1.跨域思路

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

1.1 前端解決方案

通過(guò)前端解決的思想就是，通過(guò)設(shè)置中間件把跨域的請(qǐng)求轉(zhuǎn)發(fā)一下，其實(shí)就是反向代理，
比如 http://1.2.3.4:8099 想要訪問(wèn)豆瓣的接口 http://www.douban.com/v?a=1很...
會(huì)有跨域問(wèn)題，但是如果請(qǐng)求的是http://1.2.3.4:8099/api/v?a=1 就不存在跨域

反向代理就是截取 /api 之后的請(qǐng)求轉(zhuǎn)發(fā)到http://www.douban.com/ 服務(wù)器上

vue react等項(xiàng)目可以使用 http-proxy-middleware

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

1.2 后端解決方案

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

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

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

2.本地配置nginx解決跨域 2.1 mac/vmware/設(shè)置共享文件

在虛擬機(jī)上找到設(shè)置，選擇共享文件夾

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

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

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

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

設(shè)置共享目錄

# 查看當(dāng)前設(shè)置的共享文件
#sudo vmware-hgfsclient

# 上述命令可能由于沒(méi)有安裝包報(bào)錯(cuò)，所以先安裝一下包
# apt-get install open-vm-tools
# apt-get install open-vm-tools-desktop
# apt-get install open-vm-tools-dkms

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

# 使用文件查看是否有權(quán)限進(jìn)入 /mnt/hgfs 如果沒(méi)有使用一下命令
# sudo vmhgfs-fuse .host:/ /mnt/hgfs -o allow_other -o nonempty

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

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

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

2.2 配置nginx 2.2.1 修改nginx默認(rèn)服務(wù)器根目錄

修改配置文件位置：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 訪問(wèn)http://XXX 查看配置是否生效（403錯(cuò)誤）

403錯(cuò)誤可能有兩種情況，不要誤以為真的沒(méi)有權(quán)限

配置的共享文件下是否有indx.html，沒(méi)有的話會(huì)報(bào)錯(cuò)403 Forbidden

真的沒(méi)有權(quán)限需要修改一下配置 chrod 修改權(quán)限

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

相當(dāng)良心的解決方案

2.2.3 配置反向代理

我用的豆瓣隨便的一個(gè)接口來(lái)測(cè)試的

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

2.3 測(cè)試跨域




    
    
    Title

2.4 瀏覽器測(cè)試跨域，跨域成功 跨域總結(jié) 1.跨域思路

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

1.1 前端解決方案

反向代理就是截取 /api 之后的請(qǐng)求轉(zhuǎn)發(fā)到http://www.douban.com/ 服務(wù)器上

vue react等項(xiàng)目可以使用 http-proxy-middleware

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

1.2 后端解決方案

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

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

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

2.本地配置nginx解決跨域 2.1 mac/vmware/設(shè)置共享文件

在虛擬機(jī)上找到設(shè)置，選擇共享文件夾

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

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

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

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

設(shè)置共享目錄

# 查看當(dāng)前設(shè)置的共享文件
#sudo vmware-hgfsclient

# 上述命令可能由于沒(méi)有安裝包報(bào)錯(cuò)，所以先安裝一下包
# apt-get install open-vm-tools
# apt-get install open-vm-tools-desktop
# apt-get install open-vm-tools-dkms

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

# 使用文件查看是否有權(quán)限進(jìn)入 /mnt/hgfs 如果沒(méi)有使用一下命令
# sudo vmhgfs-fuse .host:/ /mnt/hgfs -o allow_other -o nonempty

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

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

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

2.2 配置nginx 2.2.1 修改nginx默認(rèn)服務(wù)器根目錄

修改配置文件位置：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 訪問(wèn)http://XXX 查看配置是否生效（403錯(cuò)誤）

403錯(cuò)誤可能有兩種情況，不要誤以為真的沒(méi)有權(quán)限

配置的共享文件下是否有indx.html，沒(méi)有的話會(huì)報(bào)錯(cuò)403 Forbidden

真的沒(méi)有權(quán)限需要修改一下配置 chrod 修改權(quán)限

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

相當(dāng)良心的解決方案

2.2.3 配置反向代理

我用的豆瓣隨便的一個(gè)接口來(lái)測(cè)試的

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

2.3 測(cè)試跨域




    
    
    Title

2.4 瀏覽器測(cè)試跨域，跨域成功

Snip20180805_2.png

Snip20180805_3.png

Snip20180805_4.png

Snip20180805_5.png

Snip20180805_6.png

Snip20180805_7.png

參考

安裝vmtools之后在/mnt目錄下沒(méi)有hgfs文件夾

vmware設(shè)置共享文件夾

虛擬機(jī)找不到/mnt/hgfs掛載目錄

GPU云服務(wù)器云服務(wù)器史上最史上最詳細(xì)跨境電商erp js跨域解決方案跨域解決辦法

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/40038.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wh469012917

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 3022·2023-04-26 00:32
css清除浮動(dòng)clearfix：after

閱讀 507·2019-08-30 15:52
頁(yè)面設(shè)計(jì)筆記

閱讀 2113·2019-08-30 15:52
小程序輸入框文字上移問(wèn)題文字彈出輸入框

閱讀 3356·2019-08-30 15:44
使用GitHub（一）：添加SSHkey

閱讀 3287·2019-08-30 14:09
Fixed with absolute

閱讀 1422·2019-08-29 15:15
## CSS 的黑科技

閱讀 3400·2019-08-28 18:12
原生js實(shí)現(xiàn)each方法

閱讀 1083·2019-08-26 13:55

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

史上最詳細(xì)Python學(xué)習(xí)路線-從入門(mén)到精通，只需90天

架構(gòu)～微服務(wù)

架構(gòu)～微服務(wù) - 收藏集 - 掘金

史上最簡(jiǎn)單的SpringCloud教程 | 第四篇:斷路器（Hystrix）

angular - 收藏集 - 掘金

發(fā)表評(píng)論

0條評(píng)論

wh469012917

男|高級(jí)講師

TA的文章

tensorflow

css清除浮動(dòng)clearfix：after

頁(yè)面設(shè)計(jì)筆記

小程序輸入框文字上移問(wèn)題文字彈出輸入框

使用GitHub（一）：添加SSHkey

Fixed with absolute

## CSS 的黑科技

原生js實(shí)現(xiàn)each方法

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！