vue项目打包部署跨域的实现步骤（vue打包部署到nginx首次运行很慢）全程干货

96 0 0

目录1.前端工程解决办法1.1开发时候解决办法1.2打包部署后解决办法2.后端工程解决办法

跨源资源共享（CORS，或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。跨源 HTTP 请求的一个例子：运行在 https://domain-a.com 的 JavaScript 代码使用 XMLHttpRequest 来发起一个到 https://domain-b.com/data.json 的请求（也就是vue的axios，或者JQuery的ajax请求）。

出于安全性，浏览器限制脚本内发起的跨源 HTTP 请求。例如，XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源，除非响应报文包含了正确 CORS 响应头。

vue等前端工程在打包部署后，避免不了跨域问题。很让人抓狂，尤其是新手。其实解决起来也不难。

在vue的开发中可以配置代理，来解决跨域问题，以vue3的vite为例：

比如我们的后端接口地址前缀为：http://192.168.1.2/api/v1/，在vite中就可以这样配置代理：

# 跨域代理，您可以配置多个 ,请注意，没有换行符
VITE_PROXY=[[“/api/v1″,”http://192.168.1.2/api/v1”]]
#接口地址(程序中使用的地址)
VITE_API_URL=/api/v1

vue项目打包后编译成静态js了，vite的代理就不能用了，一般我们都是用nginx来直接部署打包后的程序，我们就可以在nginx中配置反向代理来解决：

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

也可以在后端工程中配置跨域，在springboot中新建CorsConfig.java配置类，在其中加入如下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(“*”) //允许任何请求头
? ? ? ? ? ? ? ? ? ? .allowCredentials(true) //带上cookie信息
? ? ? ? ? ? ? ? ? ? .exposedHeaders(HttpHeaders.SET_COOKIE)
? ? ? ? ? ? ? ? ? ? .maxAge(3600L); //maxAge(3600)表明在3600秒内，不需要再发送预检验请求，可以缓存该结果
? ? ? ? ? ? }
? ? ? ? };
? ? }
}

在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(“*”) //允许任何请求头
? ? ? ? ? ? ? ? ? ? .allowCredentials(true) //带上cookie信息
? ? ? ? ? ? ? ? ? ? .exposedHeaders(HttpHeaders.SET_COOKIE)
? ? ? ? ? ? ? ? ? ? .maxAge(3600L); //maxAge(3600)表明在3600秒内，不需要再发送预检验请求，可以缓存该结果
? ? }
}

到此这篇关于vue项目打包部署跨域的实现步骤的文章就介绍到这了,更多相关vue 打包部署跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:vuecli3打包后出现跨域问题,前端配置拦截器无效的解决前端vue打包项目,如何解决跨域问题VueCli生产环境打包部署跨域失败的解决vue项目打包后请求地址错误/打包后跨域操作Vue中跨域及打包部署到nginx跨域设置方法vue项目打包后怎样优雅的解决跨域vue打包使用Nginx代理解决跨域问题

# 随心笔谈