原文連結: https://blog.csdn.net/lhkuxia/article/details/119674392

跨域是什麼？

出於瀏覽器的同源策略限制。

同源策略（Sameoriginpolicy） 是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。

可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。

同源策略會阻止一個域的javascript指令碼和另外一個域的內容進行互動。所謂同源（即指在同一個域）就是兩個頁面具有相同的協議（protocol），主機（host）和埠號（port）；

當一個請求url的協議、域名、埠三者之間任意一個與當前頁面url不同即為跨域

當前頁面url 被請求頁面url 是否跨域 原因
http://www.test.com/ http://www.test.com/index.html 否 同源（協議、域名、埠號相同）
http://www.test.com/ https://www.test.com/index.html 跨域 協議不同（http/https）
http://www.test.com/ http://www.baidu.com/ 跨域 主域名不同（test/baidu）
http://www.test.com/ http://blog.test.com/ 跨域 子域名不同（www/blog）
http://www.test.com:8080/ http://www.test.com:7001/ 跨域 埠號不同（8080/7001）
如何解決跨域（原理）

通過一些方法設定代理，在請求傳送(接收)之前加入中間層，將不同的域名轉換成相同的，就解決了跨域的問題。客戶端傳送請求時，不直接到伺服器，而是先到代理的中間層

利用中間者去代理

1、瀏覽器給中間者傳送請求
2、中間者把請求給到伺服器
3、伺服器傳送結果給中間者
4、中間者傳送結果給瀏覽器
1
2
3
4

在這裡將http://localhost:8080的這個域名裝換為http://localhost:8081,
再將請求傳送到伺服器,這樣在伺服器端收到的請求就是使用的http://localhost:8081；
同理，當伺服器返回資料的時候，也是先到代理的中間層，
將http://localhost:8081轉換成http://localhost:8080，這樣在客戶端也是在同源下訪問的了。

實現-開發環境

假設介面域名為www.fuwuqi.cn。
vue-cli生成的配置檔案上的proxyTable
1.在執行的時候，會配置啟動一個node服務，這個服務的作用:
1是靜態檔案服務，讓你可以訪問到html/js等檔案包括監聽檔案變動等，
2是啟動一個http代理，你js傳送的請求會請求到這個服務A，由服務A代理到服務B，而服務A和靜態檔案伺服器是同源的，並不影響同源策略。
2.瀏覽器是沒有必要設定CORS的，伺服器設定CORS就是為了告知瀏覽器允許訪問我的源，不是跟我同源的，要在瀏覽器接受到響應後丟擲錯誤。

vue-cli 4之前版本專案

先找到config/index.js,dev物件下的proxyTable中
寫法:

proxyTable: {
'/api': {
target: "www.fuwuqi.cn/api", // API伺服器的地址
changeOrigin: true, // 如果設定為true,那麼本地會虛擬一個伺服器接收你的請求並代你傳送該請求，這樣就不會有跨域問題（只適合開發環境）
pathRewrite: {
'^/api': '' // 重寫路徑 比如'/api/aaa/ccc'重寫為'/aaa/ccc'
}
}
},
1
2
3
4
5
6
7
8
9
vue-cli 4之後專案

需要新建vue.config.js 【預設情況下，4以上的版本可以直接識別這個js檔案，把它當做自己的配置檔案】

步驟如下：

1、在專案框架的根目錄下新建檔案：vue.config.js

2、給新建的檔案內新增解決跨域的程式碼部分

module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://域名/api',// API伺服器的地址
ws: true, //代理websockets
changeOrigin: true, // 虛擬的站點需要更管origin
pathRewrite: { //重寫路徑 比如'/api/aaa/ccc'重寫為'/aaa/ccc'
'^/api': ''
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
3、重啟專案，這樣的話新建的檔案就可以被識別了,一定要重啟

基於vite的專案

修改vite.config.js，在defineConfig中新增以下程式碼

server:{
proxy:{
'/api': {
target: 'http://域名/api',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
1
2
3
4
5
6
7
8
9
使用

this.$axios.post('/api/register',{ //最終相當於https://域名/api/register

}).then(function (res) {
console.log(res);
})
1
2
3
4
5
生產環境

保持前端不動，依舊是代理狀態
在專案打包部署後,原來的proxyTable就不能生效了,就需要使用Nginx或Apache進行反向代理;
這次使用的是寶塔面板進行部署專案配置反向代理

假設:

前端專案域名:www.qian.cn
後端專案域名:www.hou.cn
1
2
修改方法 1

1、新建網站，並上傳專案
2、點選設定—》反向代理
3、新增反向代理，然後就ok了

假設介面的地址是：http://www.hou.com/api/index/index
代理名稱：可以隨便起，儘量跟代理目錄一致
代理目錄：就是域名後面的/api
目標URL：http://www.hou.com/api
傳送域名：會自動生成

Apache

1. 修改Apache安裝目錄下的/conf/httpd.conf;或直接在面板這裡修改:

2. 分別找到這兩行,把前面的註釋(#)去掉

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
1
2
3. 找到/www/server/panel/vhost/apache目錄下的www.qian.cn.conf

修改如下

<VirtualHost *:80>
ServerAdmin [email protected]
DocumentRoot "/www/wwwroot/dist" #專案地址
ServerName 1bb943f9.www.qian.cn
ServerAlias www.qian.cn #前端地址域名
#errorDocument 404 /404.html
ErrorLog "/www/wwwlogs/www.qian.cn-error_log"
CustomLog "/www/wwwlogs/www.qian.cn-access_log" combined
#DENY FILES
<Files ~ (\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)$>
Order allow,deny
Deny from all
</Files>
#新增開始
ProxyRequests off

<Proxy *>
Order deny,allow
Allow from Off
</Proxy>

ProxyPass /api http://www.hou.cn/api # 前面是重新路徑,後面是代理到對應的地址
#新增結束
#PHP
<FilesMatch \.php$>
SetHandler "proxy:unix:/tmp/php-cgi-00.sock|fcgi://localhost"
</FilesMatch>

#PATH
<Directory "/www/wwwroot/dist">
SetOutputFilter DEFLATE
Options FollowSymLinks
AllowOverride All
Require all granted
DirectoryIndex index.php index.html index.htm default.php default.html default.htm
</Directory>
</VirtualHost>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
4. 儲存並重啟Apache

Nginx

1. 修改Nginx安裝目錄下的/conf/nginx.conf;或直接在面板這裡修改:

2. 找到/www/server/panel/vhost/nginx目錄下的www.qian.cn.conf

修改如下

server
{
listen 80;
server_name www.qian.cn;
index index.php index.html index.htm default.php default.htm default.html;
root /www/wwwroot/dist;
#跨域請求資料
location /api {
add_header "Access-Control-Allow-Origin" *;
proxy_pass http://www.hou.cn/api;
}

location @router {
rewrite ^.*$ /index.html last;
}
location / {
try_files $uri $uri/ @router;
index index.html;
}
#SSL-START SSL相關配置，請勿刪除或修改下一行帶註釋的404規則
#error_page 404/404.html;
#SSL-END

#ERROR-PAGE-START 錯誤頁配置，可以註釋、刪除或修改
#error_page 404 /404.html;
#error_page 502 /502.html;
#ERROR-PAGE-END

#PHP-INFO-START PHP引用配置，可以註釋或修改
include enable-php-00.conf;
#PHP-INFO-END

#REWRITE-START URL重寫規則引用,修改後將導致面板設定的偽靜態規則失效
include /www/server/panel/vhost/rewrite/www.qian.cn.conf;
#REWRITE-END

#禁止訪問的檔案或目錄
location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
{
return 404;
}

#一鍵申請SSL證書驗證目錄相關設定
location ~ \.well-known{
allow all;
}

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
error_log /dev/null;
access_log /dev/null;
}
location ~ .*\.(js|css)?$
{
expires 12h;
error_log /dev/null;
access_log /dev/null;
}
access_log /www/wwwlogs/er.kuxia.top.log;
error_log /www/wwwlogs/er.kuxia.top.error.log;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
3. 儲存並重啟Nginx