虚拟机的 WebPack 和 Vue.js 代理不起作用

Posted 2023-02-22

【中文标题】虚拟机的 WebPack 和 Vue.js 代理不起作用

【英文标题】：WebPack & Vue.js proxy to VM not working

【发布时间】：2017-12-21 18:47:24

【问题描述】：

所以我正在使用Vue CLI 在我的mac 上使用webpack-dev-server 开发一个带有vue.js 本地化的站点。我想使用Vue Resource 从托管在一个流浪虚拟机（local.dev）上的后端获取数据。我试图在我的 config/index.js 文件中添加一个代理，如下所示：

proxyTable: 
  '/pf': 
    target: 'local.dev/portfolioVue/public',
    secure: false,
    changeOrigin: true,
    pathRewrite: 
      '^/pf': ''
    
  
,

然后我在挂载的src/App.vue中添加了这个功能

mounted () 
this.$http.get('/pf').then(response => 
  console.log('tutu');
, response => 
  console.log('erreur');
)

在 src/main.js 我添加了：

Vue.http.headers.common['Access-Control-Allow-Origin'] = 'local.dev/portfolioVue/public';
Vue.http.headers.common['Access-Control-Request-Method'] = 'GET';

这是在https://laracasts.com/discuss/channels/vue/cors-and-vuejs?page=1找到的

但现在我遇到了这些错误

Refused to set unsafe header "Access-Control-Request-Method"


XMLHttpRequest cannot load http://local.dev/portfolioVue/public/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9080' is therefore not allowed access.

我正在尝试获取一个返回 Json 的 php 文件 (public/index.php)

<?php echo json_encode('tutu') ?>

这可能是虚拟机配置的问题吗？

提前感谢您的帮助

【问题讨论】：

正确的属性名称不应该是proxy 而不是proxyTable？ webpack.js.org/configuration/dev-server/#devserver-proxy 我强烈建议拿一个配置示例，然后复制粘贴一个看看是否真的发生了。像pfVue_2.0 这样的名字也不是一个好主意。

感谢您的帮助。但是现在我收到此错误XMLHttpRequest cannot load http://local.dev/portfolioVue/public/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9080' is therefore not allowed access. 我不知道如何才能使访问权限正常工作...

这是一个 CORS 问题。基本上，默认情况下，您不允许从一个域向另一个域发出 XHR 请求。我不熟悉 Webpack 的代理属性，但我猜它可以通过调整你的配置来修复。这可能是一个好的开始：webpack.github.io/docs/… 或许更新您的问题以显示您尝试过的配置。

刚刚更新了问题感谢您的帮助:)

【参考方案1】：

因此，经过研究，这是一个 CORS 问题，实际上有一个用于 google chrome 的插件可以解决该问题，根据偏好，还有一些用于 Firefox 的插件。

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi