[JavaScript知识库]vue开发环境配置代理

vue.config.js或webpack.config.js中设置proxy代理解决生产环境跨域

本地启动一个服务器,端口为9000

node server.js 

server.js文件

const http = require("http");

const app = http.createServer((req, res) => {

  if (req.url === "/api/testCors") {

    res.end("i just wanna be cool");

  }

});

app.listen(9000, "localhost", () => {

  console.log("localhost:9000开启服务");

});

vue组件

<script>
import axios from "axios";
export default {
  name: "Home",
  created() {
    axios.get("/api/testCors").then((res) => {
      console.log(res);
    });
  },
</script>

我们在"http://localhost:8080去请求"http://localhost:9000，端口不一样，肯定有跨域问题

如果是开发环境，我们可以通过devServer中的proxy这个配置来设置代理，解决跨域问题，但是它只在开发环境有效

vue.config.js文件设置proxy代理

module.exports = {
  devServer: {
?    port: 8080, // 本地跑的端口，默认是8080，
?    proxy: {
?      "/api": {  // 请求路径中含 /api
?        target: "http://localhost:9000", 目标服务器
?      },
?    },
  },
};

跨域是浏览器策略，对请求需要同源的限制，但是服务器之间没有跨域的问题

我们请求发送给devServer服务器，在由devServer服务器做一次转发，发送给数据接口服务器；请求发给devServer服务器不存在跨域（同源），而devServer请求是服务器与服务器之间，不存在跨域问题

这样就做到了http://localhost:8080/api/testCors请求http://localhost:9000/api/testCors的资源

在生产环境需要后端做些配置，比如nginx或者其他方式