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

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

跨域是什么？

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

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

如何解決跨域問(wèn)題？

1. CORS（跨域資源共享）

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

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

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

2. Vue CLI 代理

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

在 vue.config.js 中配置：

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

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

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

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

4. Nginx 反向代理

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

配置示例：

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;
    }
}

前端通過(guò) /api 訪問(wèn)后端資源，不會(huì)觸發(fā)跨域。

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

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

總結(jié)

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

擴(kuò)展資料：

Vue項(xiàng)目前端部署——nginx方式 

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

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

2. vue項(xiàng)目編譯打包

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

打包完成之后，在項(xiàng)目根目錄下會(huì)多一個(gè)dist目錄

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

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

因?yàn)槭褂玫絥ginx進(jìn)行代理，所以vue.config.js里面的代理是不會(huì)生效的，我們使用nginx來(lái)配置反向代理,配置完成保存文件

server {
        listen       3012; #訪問(wèn)端口
        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èn)地址

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

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

最新評(píng)論