目录

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 target: '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;@Configurationpublic class CorsConfiguration {@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET", "POST", "PUT", "DELETE").allowedHeaders("*");}};}}