如何解决跨域问题

1、前端解决跨域

1、在vue.config.js中添加

[2、在本地环境变量中设置基础url + /api/](#2、在本地环境变量中设置基础url + /api/)

3、举例说明

2、后端解决跨域

新增跨域配置类，即可

跨域（Cross-Origin）是指在浏览器中，当前网页的协议、域名或端口与请求目标的协议、域名或端口不相同，即存在跨域请求的情况。

跨域通过前端解决（一般都是开发模式使用，前提是后端没有配置跨域）：可以通过前端解决，后端不需要更改。
跨域通过后端解决（一般是测试模式或者生产模式使用）：可以通过后端解决，前端不需要更改。

注意：如果后端解决了跨域，前端的本地、测试、开发模式都不需要解决跨域了

如果后端解决了跨域，前端发送的请求url和端口就是后端服务的url和端口

1、前端解决跨域

1、在vue.config.js中添加

javascript 复制代码

module.exports = {

  devServer: {
    proxy: {
      //拦截路径携带/api
      '/api': {//表示拦截以/api开头的请求路径
        //替换源和后端源一直  http://localhost:8080   --> http://localhost:9090 
        target: 'http://localhost:9090',
        changOrigin: true,//是否开启跨域
        pathRewrite: {
          '^/api': '' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
        }
      }
    }
  }

};

2、在本地环境变量中设置基础url + /api/

3、举例说明

javascript 复制代码

this.$request.post('user/register', {
        userId: this.form.userId,
        userName: this.form.userName,
        password: this.form.password,

      })
        .then((res) => {
          let result = res;
          if (result.code == "200") {
            this.$message({
              message: result.message,
              type: "success",
            });
            window.sessionStorage.setItem("token", result.token);
            window.sessionStorage.setItem("user", JSON.stringify(result.user));
            this.form.userId = "";
            this.form.userName = "";
            this.form.password = "";
            this.form.confirmPassword = "";
            this.$router.push('/login')
          } else if (result.code == "500") {
            this.$message({
              message: result.message,
              type: "error",
            });
          }
        })
        .catch(() => {
          this.$message.error("注册失败");
        });

devServer 是 Vue CLI 提供的一个开发服务器配置项，用于在开发环境中运行和调试 Vue 项目。它提供了许多有用的功能，方便开发人员进行开发和调试工作。

下面是一些 devServer 的主要功能和意义：

自动刷新 ：在代码修改保存后，devServer 会自动重新编译并刷新浏览器，以便你可以立即看到修改的效果，无需手动刷新页面。

热模块替换（HMR） ：devServer 支持热模块替换，即在不刷新整个页面的情况下，只替换修改的模块。这样可以加快开发速度，让你更快地看到代码修改的结果。

代理服务 ：通过 devServer 的 proxy 配置，你可以设置代理规则，将 API 请求转发到其他服务器或端口，解决前后端分离开发过程中的跨域问题。

历史回退 ：devServer 内置了一个简单的 HTML5 历史回退 API，可以使路由模式为 history 模式时，当你的应用访问一个不存在的页面时，仍然返回 index.html 页面，避免出现 404 错误。

HTTPS 支持 ：devServer 可以配置为使用 HTTPS 协议，以便你在开发环境中测试和调试使用 HTTPS 的功能。

总之，devServer 提供了一个方便的开发环境，帮助开发人员更高效地进行 Vue 项目的开发和调试工作，并提供了一些有用的功能来提升开发体验。

2、后端解决跨域

新增跨域配置类，即可

java 复制代码

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 CorsConfiguration {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("*")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowedHeaders("*");
            }
        };
    }
}