在vue中 如何實現(xiàn)跨域

跨域問題是Web開發(fā)中常見的挑戰(zhàn)，那么如何解決跨域呢，我們一起來看看吧！

跨域是什么？

跨域（Cross-Origin）是指網(wǎng)絡(luò)請求從一個域名（origin）發(fā)起，而請求的目標(biāo)資源位于另一個不同的域名下。由于瀏覽器的安全策略——同源策略（Same-origin policy），默認(rèn)情況下不允許不同域名之間的請求直接交互數(shù)據(jù)。這意味著，如果你的前端應(yīng)用運(yùn)行在一個域名（如 example.com），而嘗試請求另一個不同域名下的資源（如 api.example.org），那么這種請求就會被認(rèn)為是跨域請求。

同源策略要求發(fā)起請求的域名、協(xié)議和端口必須與目標(biāo)資源完全相同。如果不符合這一條件，瀏覽器會阻止請求的完成，除非服務(wù)器明確表示允許這種跨域請求。

如何解決跨域問題？

1. CORS（跨域資源共享）

CORS 是服務(wù)器配置的一種方式。后端可以在響應(yīng)頭中設(shè)置 Access-Control-Allow-Origin 來允許特定的域名跨域請求。

Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

Vue 前端可以正常發(fā)起請求，但需要后端支持并配置這些 CORS 頭。

2. Vue CLI 代理

在 Vue 項目開發(fā)環(huán)境中，Vue CLI 提供了一個 devServer 配置，可以設(shè)置代理服務(wù)器來避免跨域。前端請求將先發(fā)送到本地服務(wù)器，由它代理請求目標(biāo)后端，解決跨域問題。

在 vue.config.js 中配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-server.com', // 代理的目標(biāo)服務(wù)器地址
        changeOrigin: true, // 是否允許跨域
        pathRewrite: { '^/api': '' } // 重寫請求路徑
      }
    }
  }
}

這里，所有以 /api 開頭的請求都會被代理到后端服務(wù)器 http://backend-server.com，從而規(guī)避跨域問題。

• /api這是代理規(guī)則的路徑匹配模式。當(dāng)客戶端請求的URL路徑以/api開頭時，該請求將會被代理到指定的目標(biāo)服務(wù)器。例如，如果客戶端請求http://frontend.dev/api/some-resource，那么這個請求將會被代理到目標(biāo)服務(wù)器http://backend-server.com。
• target: 'http://backend-server.com' target屬性指定了代理的目標(biāo)服務(wù)器地址。所有匹配路徑模式的請求都會被轉(zhuǎn)發(fā)到這個地址。在這個例子中，所有以/api開頭的請求都會被重定向到http://backend-server.com。
• changeOrigin: true changeOrigin屬性用來指示是否應(yīng)該改變請求的起源信息。當(dāng)設(shè)置為true時，代理會修改請求的起源信息（如主機(jī)名、協(xié)議等），使得后端服務(wù)器不會看到前端服務(wù)器的地址，而是看起來像是直接請求的。
• pathRewrite: { '^/api': '' } pathRewrite屬性用于重寫請求路徑。在這個配置中，它移除了所有被代理請求中的/api前綴。例如，如果客戶端請求的是http://frontend.dev/api/some-resource，那么經(jīng)過重寫后，實際發(fā)送到后端服務(wù)器的請求將是http://backend-server.com/some-resource。 3. JSONP (僅限 GET 請求)

JSONP 是一種歷史上的跨域解決方案，但只能用于 GET 請求。它通過 <script> 標(biāo)簽的跨域加載機(jī)制來實現(xiàn)。一般現(xiàn)代應(yīng)用不推薦使用這種方式。

4. Nginx 反向代理

在生產(chǎn)環(huán)境中，通常使用 Nginx 反向代理來處理跨域請求。Nginx 可以作為前端和后端之間的中介，接收前端請求后，再將請求轉(zhuǎn)發(fā)到后端，從而避免跨域問題。

配置示例：

server {
    listen 80;
    server_name my-frontend.com;
    location /api/ {
        proxy_pass http://backend-server.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

前端通過 /api 訪問后端資源，不會觸發(fā)跨域。

5. 服務(wù)器端中轉(zhuǎn)

如果跨域問題無法通過其他方式解決，還可以通過中轉(zhuǎn)服務(wù)器的方式，前端請求發(fā)到一個同源的服務(wù)器，由該服務(wù)器再向目標(biāo)服務(wù)器發(fā)起請求。這種方式適合某些復(fù)雜的跨域場景。

總結(jié)

• 開發(fā)環(huán)境：通常使用 Vue CLI 的代理來解決跨域問題。
• 生產(chǎn)環(huán)境：后端配置 CORS 或使用 Nginx 反向代理，或者通過服務(wù)器中轉(zhuǎn)解決跨域問題。

擴(kuò)展資料：

Vue項目前端部署——nginx方式 

1. 準(zhǔn)備好服務(wù)器，下載安裝nginx并啟動

隨便在網(wǎng)上找一篇文章，下載安裝之后，啟動nginx

2. vue項目編譯打包

在項目根目錄下 運(yùn)行npm run build 進(jìn)行編譯打包

打包完成之后，在項目根目錄下會多一個dist目錄

3. 將dist目錄上傳到服務(wù)器上

4. 配置nginx安裝目錄下的nginx.config文件

因為使用到nginx進(jìn)行代理，所以vue.config.js里面的代理是不會生效的，我們使用nginx來配置反向代理,配置完成保存文件

server {
        listen       3012; #訪問端口
        server_name  localhost;
        location / {
       	   root /xx/xx/xx/dist; #前端dist包地址
           index  index.html index.htm;
	       try_files $uri $uri/ /index.html;
		}
        location /ele/ {
		proxy_set_header x-forwarded-for  $remote_addr;
		proxy_pass http://xx.xx.xx.xx:8080/; #后端代理地址
		}
	charset utf-8;
    }

5. 重啟nginx

使用service nginx restart 或則 nginx -s reload 進(jìn)行nginx重啟

6. 訪問地址

地址為服務(wù)器地址，端口是nginx配置的訪問端口，
因為我配置的是3012，所以直接 ip:3012即可。如果首頁有其他路由，可以使用ip:3012/router的方式，比如首頁路由是/index 訪問地址就是ip:3012/index

到此這篇關(guān)于Vue項目使用nginx方式部署前端的文章就介紹到這了,更多相關(guān)Vue nginx部署內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論