CORS错误-前后端交互跨域问题

最新推荐文章于 2025-03-25 09:13:52 发布

乔小乔的博客哦

最新推荐文章于 2025-03-25 09:13:52 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签： java 前端 vue

本文链接：https://blog.csdn.net/qq_38257022/article/details/129690976

版权

前端专栏收录该内容

1 篇文章

订阅专栏

文章讲述了浏览器的同源策略以及它如何导致跨域问题。跨域并不阻止请求，但浏览器会阻止返回数据。解决方案包括前端的代理设置或使用Koa-CORS插件，以及后端添加@CrossOrigin注解或配置全局拦截器来允许跨域请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要解决跨域问题，首先要了解浏览器的同源策略
同源策略：著名的安全策略，URL有三个基本组成部分：协议+域名或ip+端口，三个必须完全相同称之为同源，不同源的称之为跨域

跨域并不会阻止请求的发出，也不会阻止请求的接受，
跨域是浏览器为了保护当前页面，你的请求得到了响应，
浏览器不会把响应的数据交给页面上的回调，
取而代之的是去提示你这是一个跨域数据。
提示就是一个报错提示，就像这样：
Access to XMLHttpRequest at 'http://localhost:8082/user/login'
from origin 'http://localhost:8080' has been blocked by 
CORS policy: No 'Access-Control-Allow-Origin'
 header is present on the requested resource.

背景：
本地分别启动前端、后端项目进行调试。
前端项目地址 http://localhost:8080
后端项目地址 http://localhost:8082
解决方式有多种，以下前后端方案任选一个即可

一、前端改造

两种方式：

1. vue.config.js文件增加代理设置

module.exports = {
  devServer:{
    proxy:{
      '/api':{//表示拦截以/api开头的请求路径
        target:'http://localhost:8082',
        changOrigin: true,//是否开启跨域
        pathRewrite:{
          '^/api':'' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
        }
      }
    }
  }
}

其它用到ip的地方替换为"/api"

2. 引入插件 “koa-cors”

二、后端改造

两种方式：

方法上添加 @CrossOrigin 注解

    @PostMapping("login")
    @ResponseBody
    @CrossOrigin
    public String login(String name, String password) {
        System.out.println("name:" + name);
        if ("123".equals(name) && "123".equals(password)) {
            return "token123456";
        }
        return "登录失败";
    }

设置全局拦截器

@Configuration
@Slf4j
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowCredentials(true)
                .allowedHeaders("*")
                .allowedMethods("*")
                .maxAge(3600);

    }
}