Question

我遇到了从twitter api获取响应的问题（使用npm包Twitter）。在Chrome中，我得到了：

无法加载https://api.twitter.com/1.1/search/tweets.json?q=node.js：对预检请求的响应未通过访问控制检查：请求的资源上没有“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:3000”访问。响应具有HTTP状态代码400.如果不透明响应满足您的需要，请将请求的模式设置为“no-cors”以获取禁用CORS的资源。

因此我使用插件启用CORS，错误更改为：

无法加载https://api.twitter.com/1.1/search/tweets.json?q=node.js：预检的响应包含无效的HTTP状态代码400。

我不知道此时该做什么。我在webpack.config.js中尝试了几个不同的东西：

100px

这是我正在努力的电话

var path = require('path');
var webpack = require('webpack');
var Dotenv = require('dotenv-webpack');

module.exports = {
    devServer: {
        inline: true,
        historyApiFallback: true,
        contentBase: './src',
        port: 3000,
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept",
            "Access-Control-Allow-Credentials": "true",
            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS"
        },
        proxy: {
            "/api": "http://localhost:3000"
        }
    },
    devtool: 'cheap-module-eval-source-map',
    entry: './dev/js/index.js',
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel'],
                exclude: /node_modules/
            },
            {
                test: /\.scss/,
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                loader: 'json-loader',
                test: /\.json$/ 
            }
        ]
    },
    output: {
        path: 'src',
        filename: 'js/bundle.min.js'
    },
    node: {
        console: false,
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new Dotenv({
            path: './.env',
            safe: false
        })
    ]
};

我在firefox中尝试了它，并启用了CORS插件，我收到了这个错误：

阻止跨源请求：同源策略禁止在https://api.twitter.com/1.1/search/tweets.json?q=node.js读取远程资源。（原因：CORS预检频道没有成功）。

Answer 1

我只能想到一个解决方法：

使用chrome扩展程序Allow-Control-Allow-Origin
使用代理：而不是访问https://api.twitter.com/1.1/search/tweets.json?q=node.js，使用https://cors-anywhere.herokuapp.com/之类的代理作为前缀：https://cors-anywhere.herokuapp.com/https://api.twitter.com/1.1/search/tweets.json?q=node.js

Answer 2

我正在做反应。我遇到了同样的问题，我所做的就是在节点中安装快速服务器，制作测试终点，需要推特并按照npm网站上的步骤操作。然后我会在前端使用获取请求点击快速结束点，然后从twitter收集数据，然后将响应从twitter发送回前端。

我在localhost：4000上运行了express服务器，在localhost：3000上运行了create-react-app，然后我去了package.json，在"proxy": "http://localhost:4000"之上添加"scripts" : {}（这并不重要）尽管如此）。

像魅力一样工作^ _ ^

Answer 3

您的浏览器在向您的webpack dev服务器代理发出HTTP请求时设置原始标头，并且代理会将此原始标头转发给Twitter。 Twitter很可能会根据其非法来源拒绝该请求。您可以通过在转发请求之前删除原始标头来解决此问题：

devServer: {
  ...,
  proxy: {
    ...,
    onProxyReq: function onProxyReq(proxyReq, req, res) {
      proxyReq.removeHeader("origin")
    }
  }
}

Twitter api中的CORS问题在Webpack dev服务器中调用

3 个答案: