【前端+后端解决跨域问题】Access to XMLHttpRequest at ’http:x‘ from origin’http:x‘has been blocked by CORS

学习前端的同学想必都遇到过跨域问题，那么跨域问题究竟该如何解决呢，这里提供了前端和后端不同的解决方法，供大家参考。

最近在做一个前后端分离的项目，由自己编写前端和后端代码。后端配置好之后，在前端用axios进行调用时，遇到了跨域问题。

跨域问题是由于请求使用的ip地址或者端口，与网络接口对应的ip地址或者端口不一致而产生的。例如前端使用的url是【http://localhost:8080/users】来请求接口，这里的端口为8080，而后端默认的端口为80，因此后端的url是【http://localhost:80/users（或http://localhost/users）】，这里就出现了端口不一致导致的跨域问题。

还有一种情况是ip地址不一致的情况导致跨域问题，例如前端使用url为【http://127.0.0.1:8080/users】，而后端的接口为【http://127.0.0.2:8080/users】，这是ip地址不一致的情况。

一. 后端解决方法

（注意我配置接口用的是springMVC，因此只针对用springMVC的同学解决跨域问题）

方法1：在controller文件中加上@CrossOrigin

①在类的上面添加@CrossOrigin，解决全局跨域问题

②在对应的方法名上添加，解决单个接口的跨域问题

（可以在（origins）中写上前端的url接口允许特定端口的跨域请求）

方法2：在config配置文件夹中加上webconfig配置文件

这样可以在全局解决跨域问题，其中的【/users/】换上你自己要请求的路径

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 WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 允许所有域名访问 /users/** 路径
        registry.addMapping("/users/**")
                .allowedOrigins("http://localhost:8080")  // 允许来自 http://localhost:8080 的请求
                .allowedMethods("GET", "POST", "PUT", "DELETE")  // 允许的请求方法
                .allowedHeaders("*")  // 允许的请求头
                .allowCredentials(true);  // 是否允许携带认证信息（如 Cookies）
    }
}

二. 前端解决方法

方法1：在vue.config中添加proxy代理

①【/users】换成你自己要请求的接口，我要请求的是【http://localhost/users/xxx】

②【target: "http://localhost:80"】也是换成你自己要请求的接口，【80】是你自己后端的端口号。为什么和上面的不一样呢，因为后端配置的端口默认是80，写不写都这个80都是请求到这个端口。也就是说【http://localhost:80】等于【http://localhost】。