解决Vue开发环境跨域问题

当将这个样板与现有后端集成时，通常需要在使用开发服务器时访问后端API。为此，我们可以并行（或远程）运行开发服务器和API后端，并让开发服务器将所有API请求代理到实际的后端。

要配置代理规则，请在中编辑dev.proxyTable选项config/index.js。开发服务器正在使用http-proxy-middleware进行代理，因此您应该参阅其文档以获取详细的用法。但是这里有一个简单的例子：

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

上面的示例将代理请求/api/posts/1到http://jsonplaceholder.typicode.com/posts/1。

网址匹配

除了静态URL之外，您还可以使用glob模式来匹配URL，例如/api/**。请参阅上下文匹配以获取更多详细信另外，您可以提供一个filter可以是自定义函数的选项，以确定是否应该代理请求：

proxyTable: {
  '**': {
    target: 'http://jsonplaceholder.typicode.com',
    filter: function (pathname, req) {
      return pathname.match('^/api') && req.method === 'GET'
    }
  }
}

详情访问

var remote = {target: 'http://umeqy.com:1700',changeOrigin: true}
proxyTable: {
      '/Home': remote,
      '/Account': remote,
      '/Sys': remote,
      '/Basis': remote,
      '/Plan': remote,
      '/PriceSystem': remote,
      '/Receipt': remote,
      '/Quota': remote,
      '/Common': remote,
      '/Contract': remote,
      '/Waybill': remote,
      '/Device': remote,
      '/Permit': remote,
      '/Other': remote,
      '/Freight': remote
    },

解决Vue开发环境跨域问题

评论 (0)