如何通过vue.config.js解决vue-cli3搭建的项目中跨域问题

跨域概述
在实际的项目开发中，如果客户端和服务器的协议、域名以及端口三者存在一个不一样的话，那么由于浏览器的同源策略的限制，我们就无法完成接口的调用访问。

解决方案

1. 在前端配置跨域解决方案
   第一步：找到vue.config.js配置文件，如果没有则创建一个。
   第二步：在配置文件中添加以下代码：

   module.exports = {
     devServer: {
       proxy: 'http://localhost:8080'
     }
   }
   

   其中，http://localhost:8080是你想要代理的服务器地址。

2. 在后端配置跨域解决方案
   对于Node.js服务器，你可以在Express框架中使用cors中间件来处理跨域请求。

   const express = require('express');
   const cors = require('cors');
   const app = express();
   
   app.use(cors());
   

   对于Java服务器，你可以在Spring Boot框架中使用@CrossOrigin注解来处理跨域请求。

   @RestController
   @RequestMapping("/api")
   @CrossOrigin
   public class MyController {
   
     @GetMapping("/data")
     public String getData() {
       return "Hello, world!";
     }
   }
   

SEO优化

文章

技术指南

步骤 1：在前端配置跨域解决方案

1. 找到vue.config.js配置文件。

2. 在配置文件中添加以下代码：

   module.exports = {
     devServer: {
       proxy: 'http://localhost:8080'
     }
   }
   

步骤 2：在后端配置跨域解决方案

对于Node.js服务器，你可以在Express框架中使用cors中间件来处理跨域请求。

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

对于Java服务器，你可以在Spring Boot框架中使用@CrossOrigin注解来处理跨域请求。

@RestController
@RequestMapping("/api")
@CrossOrigin
public class MyController {

  @GetMapping("/data")
  public String getData() {
    return "Hello, world!";
  }
}

实例代码

以下是在vue-cli3项目中配置跨域解决方案的示例代码：

// vue.config.js
module.exports = {
  devServer: {
    proxy: 'http://localhost:8080'
  }
}

以下是在Node.js服务器中配置跨域解决方案的示例代码：

// server.js
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

app.get('/data', (req, res) => {
  res.json({ message: 'Hello, world!' });
});

app.listen(8080, () => {
  console.log('Server is listening on port 8080');
});

以下是在Java服务器中配置跨域解决方案的示例代码：

// MyController.java
@RestController
@RequestMapping("/api")
@CrossOrigin
public class MyController {

  @GetMapping("/data")
  public String getData() {
    return "Hello, world!";
  }
}