前言
在專案開發中，我們傾向於面對跨域的問題，因為我們使用的網域和後端的介面所在的網域名稱不一致，所以就會出現跨域問題。在開發環境下，我們可以透過設定proxy代理來解決跨域問題，但是在打包部署後，就需要使用其他方法來解決跨域問題了。本文將介紹如何使用vue-cli3打包部署跨網域。
一、什麼是跨域
跨域（Cross-Origin Resource Sharing，簡稱CORS）是瀏覽器的同源策略的限制，導致網頁不能從其他來源取得資源，而同源即指兩個頁面有完全相同的協定、網域名稱和連接埠號碼。如果一個請求從非同源的來源路徑下發起，瀏覽器就會拒絕請求。
二、vue-cli3打包的幾個模式
在vue-cli3中，打包分為三種模式：
- 測試模式（build-test ）
測試模式會將我們的程式碼打包成開發環境下可以運行的模式，並且自動開啟sourcemap調試功能。
- 生成模式（build-prod）
生成模式會將我們的程式碼進行壓縮、混淆等處理，適用於部署到生產環境。
- 產生並預覽模式（serve）
serve模式會將我們的程式碼進行熱更新，並且提供一個預覽服務，適用於開發時的預覽和測試。
三、打包部署跨域解決方案
在打包部署跨域時，我們需要使用nginx來進行反向代理解決跨域問題。
nginx是一款高效能的網頁伺服器，可以在windows、 linux、mac 等各種作業系統上運作。它的功能非常強大，可以用於反向代理、負載平衡、快取等等。
- 安裝nginx
在Linux環境下，我們可以透過以下指令來安裝nigix：
sudo apt-get update
sudo apt-get install nginx
登入後複製
- 設定nginx
在安裝完nginx之後，我們需要設定nginx來解決跨域問題。
首先，我們需要找到nginx的設定文件，一般情況下在/etc/nginx/conf.d/default.conf，我們透過以下命令開啟nginx的設定檔：
sudo vim /etc/nginx/conf.d/default.conf
登入後複製
然後找到server段，如下：
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ .php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ .php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /.ht {
# deny all;
#}
}登入後複製
我們需要在location段下進行反向代理的配置，例如：
location /api {
proxy_pass http://192.168.0.100:8080; # 后端API地址
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_http_version 1.1;
proxy_connect_timeout 600;
proxy_read_timeout 600;
proxy_send_timeout 600;
proxy_buffer_size 64k;
proxy_buffers 4 64k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
# 解决跨域
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
# 缓存时间，单位秒。这里设置的是6小时
expires 21600s;
# 收到304响应后，再次请求的时间间隔
proxy_cache_valid 200 304 12h;
}登入後複製
其中，proxy_pass後面的位址要改為你的後端API位址，add_header解決的是跨域問題。
- 修改vue.config.js設定
在vue-cli3中，我們可以透過在vue.config.js中設定publicPath讓打包後的檔案不依賴域名，具體配置如下：
module.exports = {
publicPath: '',
devServer: {
// 设置跨域代理
proxy: {
'/api': {
target: 'http://192.168.0.100:8080', // 后端API地址
ws: true,
changOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
},
chainWebpack: (config) => {
config.optimization.delete('splitChunks');
}
}登入後複製
其中，/api是後端API位址的前綴，target配置的是後端API位址。
- 打包部署
經過以上的設定後，我們就可以打包部署vue專案了。在打包完成後，我們將/dist目錄下的檔案全部拷貝到nginx配置的根目錄下，一般情況下是/usr/share/nginx/html，然後我們重新啟動nginx服務：
sudo service nginx restart
登入後複製
至此，我們已經成功實現了vue-cli3打包部署跨域。
總結
本文介紹如何使用nginx反向代理來解決vue-cli3打包部署跨域問題。透過上述的配置，我們可以解決跨域問題，並且在生產環境下進行部署。當然，在部署過程中我們需要注意安全問題，例如：開啟nginx的使用者存取權限等。當然，我們也可以使用其他方法來解決跨域問題，例如：jsonp、websocket等。
以上是vue打包部署跨域的詳細內容。更多資訊請關注PHP中文網其他相關文章！
