Vue.js项目开发过程中本地跨域问题

什么是跨域?（CORS）

跨源资源共享（CORS，或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

跨源 HTTP 请求的一个例子：运行在 127.0.0.1 的 本地 JavaScript 代码使用 XMLHttpRequest 来发起一个到 https://domain-b.com/data.json 的请求。

出于安全性，浏览器限制脚本内发起的跨源 HTTP 请求。例如，XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源，除非响应报文包含了正确 CORS 响应头。

在Vue中怎么解决呢，我使用的是 @vue/cli 5.0.8版本脚手架创建的项目，在项目根目录有一个 vue.config.js的文件

devServer: {
    host: '127.0.0.1',
    port: 8080,
    proxy: {
      '/api': {
        target: 'https://domain-b.com/api',
        changeOrigin: true, //是否跨域
        pathRewrite: { 
          '^/api': "" //这里会重写路径匹配到/api之前 'http://localhost:8080/api'
        }
      }
    }
  }

特别注意这里的 “/api“, 这只是我举的例子，不是所有接口地址后面都是"/api"，实际项目中要换成你们自己API地址的路由。