webpack-dev-server 如何解决跨域请求!!

circle
  • 4.7k

1.loaclhost:8080 webpack-dev-server 本地服务器,接口请求地址是api.xxx.com,现在就是无法在本地请求远程服务器上的接口。

XMLHttpRequest cannot load http://api.xxx.com/v1/f/shares.
 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 403.

有找过相关资料。配置不造是错了还是什么不起作用。

    entry:[
        'webpack/hot/only-dev-server',
        './src/main.js'
    ],
    devServer: {
        hot: true,
        inline: true,
        proxy: {
            '*': {
                target: 'localhost:8080',
                host:'http://m.xxx.com',
                secure: false,
            }
        }
    },
回复
阅读 12.4k
3 个回答
changeOrigin: true
target: http://api.xxx.com

然后改成你本地引用的地址,比如/api/
其他地方调用的时候,就写ajax('/api/xxx')之类的

小彭友晚安
  • 2
新手上路,请多包涵

加了这个,代理服务器会在请求头中加入相应Host首部,然后目标服务器就可以根据这个首部来区别要访问的站点了。假如你在本地80端口起了apache服务器,服务器配了两个虚拟站点a.com b.com,设置代理之后并且changeOrigin为true 。此时就可以正确方法问道虚拟主机下的文档内容。否则访问a b站点等同于访问localhost。webpack dev sever用的是node-http-proxy, 你可以找这个相关的资料。

提供一个思路,有可能是AdBlocker的Chrome插件,把你的带有 ad、advert 相关的接口,全部给拦截掉了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏