使用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

你的代码我测试了下，没有问题啊，我代码如下：

// webpack.config.js
devServer:{
  id:127.0.0.1,
  port:3000,
  proxy:{
    '/v2':{
        target: 'http://api.douban.com',
        changeOrigin: true,
        pathRewrite: {
          '^/v2': '/v2'
        }
    }
  }
}

 // index.js 注意：这里我使用了jquery的ajax，其实用什么无所谓
  $.ajax({
    url:'/v2/movie/in_theaters',
    type:'POST',
    dataType:'json',
    success:function(data){
      console.log(data);
    },
    error:function(error){
      console.log(error)
    }
  })

下面是浏览器截图：

按照提问者要求，使用axios 实现一把

1. webpack.config.js配置还是一样，不做修改

2. 数据请求的代码改为axois实现

    import axios from 'axios';
    
    axios.post('/v2/movie/in_theaters')
    .then(data=>{
      console.log(data); // 这个地方返回，完整的请求对象
    })
    .catch(error=>{
      console.error(error);// 异常处理
    })
   

请求图如下：

响应图如下：

console.log 输出结果：

Answer 2

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

这句话告诉你请求的协议不对，你这里的跨域只允许http, data, chrome, chrome-extension, https这五种协议，到network里去分析下请求，看那里有没有出问题。

Answer 3

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