如何解决跨域问题

目录

1、前端解决跨域

1、在vue.config.js中添加

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

3、举例说明

2、后端解决跨域

新增跨域配置类，即可

---

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

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

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

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

1、前端解决跨域

1、在vue.config.js中添加

module.exports = {

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

};

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

3、举例说明

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 的主要功能和意义：

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

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

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

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

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

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

2、后端解决跨域

• 新增跨域配置类，即可

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("*");
            }
        };
    }
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net