出于安全性,浏览器限制脚本内发起的跨源 HTTP 请求。例如,XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源,除非响应报文包含了正确 CORS 响应头。
vue等前端工程在打包部署后,避免不了跨域问题。很让人抓狂,尤其是新手。其实解决起来也不难。
1.前端工程解决办法
1.1开发时候解决办法
# 跨域代理,您可以配置多个 ,请注意,没有换行符 VITE_PROXY = [["/api/v1","http://192.168.1.2/api/v1"]] #接口地址(程序中使用的地址) VITE_API_URL=/api/v1
1.2打包部署后解决办法
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 *; }
2.后端工程解决办法
也可以在后端工程中配置跨域,在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秒内,不需要再发送预检验请求,可以缓存该结果 } }
您可能感兴趣的文章: