前端Vue配置跨域为什么失效

最新推荐文章于 2025-04-28 15:23:26 发布

努力学Java的小许

最新推荐文章于 2025-04-28 15:23:26 发布

阅读量838

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_72642362/article/details/144008686

版权

前后端分离已经是非常常见了，但是前端向后端请求数据时，如果不做配置，一定会出现跨域问题。为什么会有跨域问题呢？这是因为浏览器的同源策略。

浏览器只允许当协议、域名、端口都相同的时候才能请求资源，只要三者有一个不一样，就无法请求到资源，像下面的错误（这里前端用的是axios）：

Network Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:116:14) at Axios.request (webpack-internal:///./node_modules/axios/lib/core/Axios.js:58:41)

这里用的是Vue2+Vue Cli打包工具，会生成一个vue.config.js（其他环境可能不会自动生成这个文件），这时候在里面设置proxy来解决跨域，就像这样（这里后端端口为8080，后端协议+域名+端口为http://localhost:8080/user，所以proxy里面其中一个对象为'/user'，target为http://localhost:8080）：

如上配置之后，需要重新npm run serve启动前端，再次请求数据，发现还是因为跨域问题无法获取到数据，又为什么呢？因为后端同样需要设置跨域cors（我后端用的是springboot框架）

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/user/**") // 允许跨域的路径
                .allowedOrigins("http://localhost:7000", "http://example.com") // 允许的源，可以是一个或多个
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的HTTP方法
                .allowedHeaders("*") // 允许的头部，使用 * 表示允许所有头部
                .allowCredentials(true); // 是否允许发送凭证（如cookies）
    }
}

我前端用的7000端口，所以上面是7000端口，

那么这样配置之后，跨域问题就可以完美解决啦！

前端：