Webpack 开发服务器中 Twitter api 调用的 CORS 问题

IT技术 node.js reactjs twitter webpack cors
2021-04-30 19:39:23

我遇到了从 twitter api 获取响应的问题(使用 npm 包 Twitter)。在 Chrome 中,我得到:

无法加载https://api.twitter.com/1.1/search/tweets.json?q=node.js:对预检请求的响应未通过访问控制检查:没有“Access-Control-Allow-Origin”标头存在于请求的资源上。因此,不允许访问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 中尝试了一些不同的东西:

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
        })
    ]
};

这是我要打的电话

import Twitter from 'twitter';

const client = new Twitter({
  consumer_key: process.env.TWITTER_CONSUMER_KEY,
  consumer_secret: process.env.TWITTER_CONSUMER_SECRET,
  bearer_token: process.env.TWITTER_BEARER_TOKEN
});

client.get('search/tweets', {q: 'node.js'}, function(error, tweets, response) {
   console.log(tweets);
});

我在启用 CORS 插件的情况下也在 firefox 中尝试过,但出现此错误:

跨域请求被阻止:同源策略不允许在https://api.twitter.com/1.1/search/tweets.json?q=node.js读取远程资源(原因:CORS 预检通道没有成功)。

3个回答

我是在react上做的。我遇到了同样的问题,我为解决这个问题所做的是在节点中安装一个快速服务器,制作测试端点,需要 twitter 并按照 npm 站点上的步骤操作。然后我会在前端用一个 fetch 请求到达 express 端点,这反过来会从 twitter 收集数据,然后将响应从 twitter 发送回前端。

我在 localhost:4000 上运行了快速服务器,在 localhost:3000 上运行了我的 create-react-app,然后我去 package.json 添加"proxy": "http://localhost:4000"上面的内容"scripts" : {}(虽然这并不重要)。

像魅力一样工作^_^

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

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

您的浏览器在向您的 webpack 开发服务器代理发出 HTTP 请求时会设置一个原始标头,并且代理将此原始标头转发到 Twitter。Twitter 很可能会基于其非法来源拒绝该请求。您可以通过在转发请求之前删除原始标头来解决此问题:

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