A-A+

用webpack-dev-server开发时代理,决解开发时跨域问题

2016年11月23日 webpack 暂无评论 阅读 11,258 次

用webpack-dev-server开发时代理,决解开发时跨域问题

结论: 暂时研究到 支持域名,但是不支持ip

支持本机ip代理 指定域名

思路1

需要webpack,webpack-dev-server

npm install webapck webpack-dev-server --save-dev

设置时

devServer: {
        historyApiFallback: true,
          hot: true,
        inline: true,
        stats: { colors: true },
        proxy: {
            '/list': {
              target: 'https://api.github.com',
              pathRewrite: {'^/column' : '/column'},
              changeOrigin: true
            }
         }
    },

这段代码就是将  '/list' 通过本地开发服务器webpack-dev-server转发到 'https://api.github.com'
项目地址:https://github.com/fengnovo/diary/tree/master/react/20161021/webpack-dev-server-proxy-test

思路2

 

我是这样配置的:

devServer: {
      historyApiFallback: true,
      hot: true,
      inline: true,
      contentBase: './build',
      port: 8080,
      stats: { colors: true },

      proxy: {
        '/api': {
          target: 'http://huggies.kmapp.net',
          pathRewrite: {'^/api' : '/campaign_huggies/t3store_freeuse/admin'},
          changeOrigin: true
        }
      }
    },

 

这样 http://localhost:8080/api/getUser.php 的请求就是后端的接口 http://user.reekly.com/campaign_huggies/t3store_freeuse/admin/getUser.php 了

思路3

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,
            }
        }
    },
changeOrigin: true
target: http://api.xxx.com

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

 

ps:https://segmentfault.com/q/1010000004881097

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录