鍍金池/ 問答/HTML/ 使用webpack和React 進行axios請求出現(xiàn)跨域問題

使用webpack和React 進行axios請求出現(xiàn)跨域問題

我的環(huán)境是 node webpack 使用的語言是react

我嘗試著使用proxy代理，解決react經(jīng)過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請求成功。

結果網(wǎng)頁上顯示的是err，我打開chrome的開發(fā)者工具，顯示以下的錯誤:

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

我想請問一下是否是我的配置出現(xiàn)了什么問題呢。

回答
編輯回答
忠妾

你的代碼我測試了下，沒有問題啊，我代碼如下：

// 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 實現(xiàn)一把

  1. webpack.config.js配置還是一樣，不做修改

  2. 數(shù)據(jù)請求的代碼改為axois實現(xiàn)

     import axios from 'axios';
 
 axios.post('/v2/movie/in_theaters')
 .then(data=>{
   console.log(data); // 這個地方返回，完整的請求對象
 })
 .catch(error=>{
   console.error(error);// 異常處理
 })

請求圖如下：
圖片描述
響應圖如下：
圖片描述
console.log 輸出結果：
console

2018年8月10日 22:08
編輯回答
伐木累

按照題主和1樓的代碼分別試了下，題主的axios方法使用的參數(shù)是{url:'...'},實際上axios第一個參數(shù)就是url，不需要傳入json數(shù)據(jù)

2017年3月16日 09:15
編輯回答
小眼睛
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

這句話告訴你請求的協(xié)議不對，你這里的跨域只允許http, data, chrome, chrome-extension, https這五種協(xié)議，到network里去分析下請求，看那里有沒有出問題。

2018年1月2日 13:52