解决Vue3跨域问题

解Vue3跨域问题

今天敲码发现本地前端向后端发送请求时，发送请求出现跨域问题，联系广大网友发现两种解决跨域的方法

一、前端解决跨域

前端axios向后端发起请求时，调试报错【跨域：CORS policy】

后端3000接口接收到请求但是返回值res前端无法接收

解决方法【反向代理】

• axios直接发送请求/users经反向代理发送到localhost:3000端口
• 找到vue.config.js文件并添加反向代理，将匹配到/user路径的请求转发到3000端口

问题解决成功…

• 配置反向代理后前端成功向后端发送请求并接受获取到的参数

二、后端解决跨域

• 此处选择基于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("*");
    }
}

问题解决成功…

• 前端照常发起请求，后端启动项目后配置类自动创建

---