快捷導(dǎo)航

vue項(xiàng)目打包部署跨域的實(shí)現(xiàn)步驟

更新時(shí)間：2023年05月15日 14:29:45 作者：義龍陳序員

在前端 Vue 項(xiàng)目打包后，如果需要訪(fǎng)問(wèn)另一個(gè)域名下的接口，由于瀏覽器的同源策略限制，會(huì)出現(xiàn)跨域問(wèn)題，本文就介紹一下vue項(xiàng)目打包部署跨域的實(shí)現(xiàn)步驟，感興趣的可以了解一下

跨源資源共享（CORS，或通俗地譯為跨域資源共享）是一種基于 HTTP 頭的機(jī)制，該機(jī)制通過(guò)允許服務(wù)器標(biāo)示除了它自己以外的其他源（域、協(xié)議或端口），使得瀏覽器允許這些源訪(fǎng)問(wèn)加載自己的資源。跨源資源共享還通過(guò)一種機(jī)制來(lái)檢查服務(wù)器是否會(huì)允許要發(fā)送的真實(shí)請(qǐng)求，該機(jī)制通過(guò)瀏覽器發(fā)起一個(gè)到服務(wù)器托管的跨源資源的“預(yù)檢”請(qǐng)求。在預(yù)檢中，瀏覽器發(fā)送的頭中標(biāo)示有 HTTP 方法和真實(shí)請(qǐng)求中會(huì)用到的頭。跨源 HTTP 請(qǐng)求的一個(gè)例子：運(yùn)行在 https://domain-a.com 的 JavaScript 代碼使用 XMLHttpRequest 來(lái)發(fā)起一個(gè)到 https://domain-b.com/data.json 的請(qǐng)求（也就是vue的axios，或者JQuery的ajax請(qǐng)求）。

出于安全性，瀏覽器限制腳本內(nèi)發(fā)起的跨源 HTTP 請(qǐng)求。例如，XMLHttpRequest 和 Fetch API 遵循同源策略。這意味著使用這些 API 的 Web 應(yīng)用程序只能從加載應(yīng)用程序的同一個(gè)域請(qǐng)求 HTTP 資源，除非響應(yīng)報(bào)文包含了正確 CORS 響應(yīng)頭。

vue等前端工程在打包部署后，避免不了跨域問(wèn)題。很讓人抓狂，尤其是新手。其實(shí)解決起來(lái)也不難。

1.前端工程解決辦法

1.1開(kāi)發(fā)時(shí)候解決辦法

在vue的開(kāi)發(fā)中可以配置代理，來(lái)解決跨域問(wèn)題，以vue3的vite為例：
比如我們的后端接口地址前綴為：http://192.168.1.2/api/v1/，在vite中就可以這樣配置代理：

# 跨域代理，您可以配置多個(gè) ,請(qǐng)注意，沒(méi)有換行符
VITE_PROXY = [["/api/v1","http://192.168.1.2/api/v1"]]
#接口地址(程序中使用的地址)
VITE_API_URL=/api/v1

1.2打包部署后解決辦法

vue項(xiàng)目打包后編譯成靜態(tài)js了，vite的代理就不能用了，一般我們都是用nginx來(lái)直接部署打包后的程序，我們就可以在nginx中配置反向代理來(lái)解決：

server{
	listen 80;
	server_name localhost;
	index    index.html index.htm;
	root   /var/www/dist;
	error_log   logs/localhost_error.log crit;
	access_log  logs/localhost_access.log  access;
	# 接口地址反代
    location /api/v1/ {
	    proxy_pass http://192.168.1.2/api/v1/;
	    proxy_redirect off;
	    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;
	}
	rewrite ^(.*)\;(.*)$ $1 last;
	location ~* \.(eot|ttf|woff|woff2|svg|otf|html|htm|pdf|PDF|mp4|MP4)$ {
		add_header Access-Control-Allow-Origin *;
	}
	add_header Access-Control-Allow-Origin *;
}

2.后端工程解決辦法

也可以在后端工程中配置跨域，在springboot中新建CorsConfig.java配置類(lèi)，在其中加入如下Bean：

在Spring WebMvc中：

package com.example.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
?? ?@Bean
? ? public WebMvcConfigurer corsConfigurer() {
? ? ? ? return new WebMvcConfigurer() {
? ? ? ? ? ? @Override
? ? ? ? ? ? public void addCorsMappings(CorsRegistry registry) {
? ? ? ? ? ? ? ? registry.addMapping("/**")
? ? ? ? ? ? ? ? ? ? .allowedOriginPatterns("*") //允許跨域的域名，可以用*表示允許任何域名使用
? ? ? ? ? ? ? ? ? ? .allowedMethods("*") //允許任何方法（post、get等）
?? ? ? ? ? ? ? ? ? ?.allowedHeaders("*") //允許任何請(qǐng)求頭
? ? ? ? ? ? ? ? ? ? .allowCredentials(true) //帶上cookie信息
? ? ? ? ? ? ? ? ? ? .exposedHeaders(HttpHeaders.SET_COOKIE)
? ? ? ? ? ? ? ? ? ? .maxAge(3600L); //maxAge(3600)表明在3600秒內(nèi)，不需要再發(fā)送預(yù)檢驗(yàn)請(qǐng)求，可以緩存該結(jié)果
? ? ? ? ? ? }
? ? ? ? };
? ? }
}

在Spring WebFlux中：

package com.example.config;
import org.springframework.boot.autoconfigure.AutoConfigureOrder;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.http.HttpHeaders;
import org.springframework.web.reactive.config.CorsRegistry;
import org.springframework.web.reactive.config.EnableWebFlux;
import org.springframework.web.reactive.config.WebFluxConfigurer;
@Configuration
public class CorsConfig implements WebFluxConfigurer {
? ? @Override
? ? public void addCorsMappings(CorsRegistry registry) {
? ? ? ?registry.addMapping("/**")
? ? ? ? ? ? ? ? ? ? .allowedOriginPatterns("*") //允許跨域的域名，可以用*表示允許任何域名使用
? ? ? ? ? ? ? ? ? ? .allowedMethods("*") //允許任何方法（post、get等）
?? ? ? ? ? ? ? ? ? ?.allowedHeaders("*") //允許任何請(qǐng)求頭
? ? ? ? ? ? ? ? ? ? .allowCredentials(true) //帶上cookie信息
? ? ? ? ? ? ? ? ? ? .exposedHeaders(HttpHeaders.SET_COOKIE)
? ? ? ? ? ? ? ? ? ? .maxAge(3600L); //maxAge(3600)表明在3600秒內(nèi)，不需要再發(fā)送預(yù)檢驗(yàn)請(qǐng)求，可以緩存該結(jié)果
? ? }
}

到此這篇關(guān)于vue項(xiàng)目打包部署跨域的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)vue 打包部署跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: