在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 使用webpack和React 進(jìn)行axios請(qǐng)求出現(xiàn)跨域問(wèn)題

使用webpack和React 進(jìn)行axios請(qǐng)求出現(xiàn)跨域問(wèn)題

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

我嘗試著使用proxy代理,解決react經(jīng)過(guò)webpack打包后進(jìn)行axios請(qǐng)求存在的跨域問(wèn)題

這是我的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"})
 })

我通過(guò)設(shè)置state來(lái)判斷是否axios請(qǐng)求成功。

結(jié)果網(wǎng)頁(yè)上顯示的是err,我打開chrome的開發(fā)者工具,顯示以下的錯(cuò)誤:

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

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

回答
編輯回答
忠妾

你的代碼我測(cè)試了下,沒(méi)有問(wè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,其實(shí)用什么無(wú)所謂
  $.ajax({
    url:'/v2/movie/in_theaters',
    type:'POST',
    dataType:'json',
    success:function(data){
      console.log(data);
    },
    error:function(error){
      console.log(error)
    }
  })

下面是瀏覽器截圖:
請(qǐng)求概要圖
響應(yīng)結(jié)果

按照提問(wèn)者要求,使用axios 實(shí)現(xiàn)一把

  1. webpack.config.js配置還是一樣,不做修改
  2. 數(shù)據(jù)請(qǐng)求的代碼改為axois實(shí)現(xiàn)

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

請(qǐng)求圖如下:
圖片描述
響應(yīng)圖如下:
圖片描述
console.log 輸出結(jié)果:
console

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

按照題主和1樓的代碼分別試了下,題主的axios方法使用的參數(shù)是{url:'...'},實(shí)際上axios第一個(gè)參數(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.

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

2018年1月2日 13:52