1、报错

2、解决

方法一：修改 package.json

在 package.json 中添加代码

"proxy": "http://tingapi.ting.baidu.com" // 这是你要访问的域

然后重新运行，否则会报如下错误：修改了 package.json 需要重启

请求成功：

方法二：使用 http-proxy-middleware（常用）

安装

cnpm install http-proxy-middleware --save

配置：在 src 下新建一个 setupProxy.js ，添加如下代码

const proxy = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(
    'api',
    proxy({
      target: 'http://localhost:3100', // 你要访问的地址
      changeOrigin: true
    })
  )
}

重启遇到问题：

百度之后，在一篇博客中发现原来是 http-proxy-middleware 版本更新带来的问题

0.x.x版本的引用方式
const proxy = require('http-proxy-middleware');
1.0.0版本的引用方式
const { createProxyMiddleware } = require('http-proxy-middleware');

修改成以下，重启

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(
    'api',
    createProxyMiddleware({
      target: 'http://localhost:3100',
      changeOrigin: true
    })
  )
}

成功

---

3、关于跨域

常用解决方法：

• jsonp
• CORS
• 代理 proxy

3.1 什么是跨域

3.2 常用解决方案

开发模式下：react、vue都提供了解决方案
生产模式下：jsonp、cors、iframe、postMessage、……