解Vue3跨域问题
今天敲码发现本地前端向后端发送请求时,发送请求出现跨域问题,联系广大网友发现两种解决跨域的方法
一、前端解决跨域
前端axios向后端发起请求时,调试报错【跨域:CORS policy】
![image-20230913170017182](https://i-blog.csdnimg.cn/blog_migrate/691640bbdc07edbbdb25c41a64546e3d.png)
![image-20230913170130306](https://i-blog.csdnimg.cn/blog_migrate/025241fc66faf657e84fbbbd4ee9c45f.png)
后端3000接口接收到请求但是返回值res前端无法接收
解决方法【反向代理】
- axios直接发送请求
/users
经反向代理发送到localhost:3000端口 - 找到
vue.config.js
文件并添加反向代理,将匹配到/user
路径的请求转发到3000端口
![image-20230913170017182](https://i-blog.csdnimg.cn/blog_migrate/89ccf89a229f55743a0f2291e8d66733.png)
![image-20230913170130306](https://i-blog.csdnimg.cn/blog_migrate/d69e1df7ea1184952b295f5f1c68d5f9.png)
问题解决成功…
- 配置反向代理后前端成功向后端发送请求并接受获取到的参数
![image-20230913170017182](https://i-blog.csdnimg.cn/blog_migrate/50cf8865e5fe4c85cadcfcc8384c4676.png)
![image-20230913170130306](https://i-blog.csdnimg.cn/blog_migrate/33abf80aa039c9e30b8963433c0e2bff.png)
二、后端解决跨域
- 此处选择基于Spring框架配置的后端配置类进行跨域问题的解决
创建配置类
package com.mystudy.configuration;
import lombok.extern.java.Log;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Slf4j //日志打印
@Configuration
public class CrosConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry){
log.info("跨域问题配置类设置成功...");
registry.addMapping("/**") //配置可以被跨域的路径,可以任意配置,可以具体到直接请求路径
//允许所有的请求域名访问我们的跨域资源,可以固定单条或者多条内容
.allowedOriginPatterns("*")
//允许所有的请求方法访问该跨域资源服务器
.allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
//用于告知浏览器当withCredentials属性设置为true时,是否可以显示跨域请求返回的内容
.allowCredentials(true)
//资源过期时间
.maxAge(3600)
.allowedHeaders("*");
}
}
问题解决成功…
- 前端照常发起请求,后端启动项目后配置类自动创建
![image-20230913170017182](https://i-blog.csdnimg.cn/blog_migrate/47633a90098aceca11341619c56f7b4a.png)
![image-20230913170130306](https://i-blog.csdnimg.cn/blog_migrate/4c42151d6c6b42a33eb316c7248344fc.png)