使用webpack和React 进行axios请求出现跨域问题

Question

我的环境是 node webpack 使用的语言是react

我尝试着使用proxy代理，解决react经过webpack打包后进行axios请求存在的跨域问题

这是我的webpack.config.js的代码

let path = require('path');

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

module.exports = {

    devServer: {

        historyApiFallback: true,

        port: 8080,

        proxy:{

            '/v2': {

                target: 'http://api.douban.com',

                secure:false,

                changeOrigin: true,

                pathRewrite: {

                    '^/v2': '/v2'

                }

            }

        }

    },

    entry: ['./App/app.js'],

    output: {

        path: path.join(__dirname, '/dest'),

        filename: 'app.js'

    },

    resolve: {

        extensions: ['.js', '.jsx', '.css']

    },

    module: {

        loaders: [

            {   test: /\.js|jsx$/,

                loaders: ['babel-loader'],

                exclude: /node_modules/

            },

            {

                test: /\.css$/,

                loaders:['css-loader']

            },

            {   test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,

                loaders: ['file-loader']

            },

            {   test: /\.json$/,

                loader: 'json-loader'

            }

        ]

    },

    node: {

        console: true,

        fs: 'empty',

        net: 'empty',

        tls: 'empty'

    }

};

这是我的react 的部分代码

 axios.post({

 url: '/v2/movie/in_theaters',

 })

 .then((res)=>{

 //console.log(res.data)

 //data=res.data;

 this.setState({data:"success"})

 })

 .catch((err)=>{

 this.setState({data:"err"})

 })

我通过设置state来判断是否axios请求成功。

结果网页上显示的是err，我打开chrome的开发者工具，显示以下的错误:

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

我想请问一下是否是我的配置出现了什么问题呢。

Answer 1

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.这句话告诉你请求的协议不对，你这里的跨域只允许http, data, chrome, chrome-extension, https这五种协议，到network里去分析下请求，看那里有没有出问题。

Answer 2

按照题主和1楼的代码分别试了下，题主的axios方法使用的参数是{url:'...'},实际上axios第一个参数就是url，不需要传入json数据