我的代理在Webpack中有些问题吗?

时间:2017-12-19 11:56:58

标签: javascript reactjs webpack axios

我想从其他人写的Api中获取一些信息。我使用axios来请求Api。当我使用Webpack打包时,它会遇到跨域问题。我尝试使用Webpack提供的代理,但它仍然显示了一些问题。

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

我按照这个来编写我的webpack.config.js

https://webpack.github.io/docs/webpack-dev-server.html#proxy

这是我的webpack.config.js

let path = require('path');

module.exports = {
    devServer: {
        proxy:{
            '/v2': {
                target: 'http://api.douban.com',
                secure:false,
                changeOrigin: true,
                pathRewrite: {
                    '^/v2': '/v2'
                }
            }
        }
    },
    entry: ['whatwg-fetch','./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'
    }
};

这是我的axios请求:

 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"})
 })

我使用React,所以我尝试通过setState了解Success是否成功。

1 个答案:

答案 0 :(得分:0)

http://api.douban.com托管在哪里?

您需要更新其服务器配置以允许从其他来源(可能是localhost)发送请求。

基本上,默认情况下,douban.com上托管的内容发送的请求可能已启用,但除非在服务器配置中明确允许,否则不会从其他位置启用。

Cross-Origin Resource Sharing (CORS)