Webpack 配置以使用没有 CORS 标头的 API

Posted 2023-02-22

【中文标题】Webpack 配置以使用没有 CORS 标头的 API

【英文标题】：Webpack config to consume an API with no CORS header

【发布时间】：2018-08-10 03:16:14

【问题描述】：

我需要使用一个没有 CORS 标头的公共 API。我是 webpack 的新手，所以我通过阅读文章来采用这种方法。脚手架由公司提供。这是工作练习的第二部分。

我一直在寻找几个小时，但似乎没有任何帮助。我总是得到相同的回复No 'Access-Control-Allow-Origin' header is present on the requested resource ...

这是我现在的webpack.config.js

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin(
  template: './client/index.html',
  filename: 'index.html',
  inject: 'body'
)
module.exports = 
  entry: './client/index.js',
  output: 
    path: path.resolve('dist'),
    filename: 'index_bundle.js'
  ,
  module: 
    rules: [
       test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      ,
       test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      ,
      
        test: /\.(sass)$/,
        use: [
            loader: "style-loader"
          , 
            loader: "css-loader"
          , 
            loader: "sass-loader"
        ]
      ,
      
        test: /\.html/,
        loader: 'raw-loader'
      ,
    ],
  ,
  plugins: [HtmlWebpackPluginConfig],
  devServer: 
    contentBase: './src/public',
    port: 1184,
    proxy: 
      'https://api.mcmakler.de/v1/advertisements': 
        target: 'https://api.mcmakler.de/v1/advertisements',
        secure: false
      
    
  ,
  resolve: 
    extensions: [ '.js', '.jsx' ]
  
;

我的依赖是：

 "devDependencies": 
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.9",
    "eslint": "^4.0.0",
    "file-loader": "^1.1.8",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.7.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.2",
    "url-loader": "^0.6.2",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  ,
  "dependencies": 
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "yarn": "^1.3.2"
  

这是我的 jsx 文件，它是一个用于渲染广告的简单组件

import React from 'react';

import House from './index.jsx';

const publicApi = "https://api.mcmakler.de/v1/advertisements";

export default class Dinamic extends React.Component 
    constructor () 
        super();
        this.state = 
            advertisements: [],
        ;
    
    componentDidMount() 

        fetch(publicApi)
        .then((results) => 
                console.info('results: ', results);
                return results.blob();
            )
            .then ((data) => 
                console.info('data: ', data);
                const advertisements = data.results.map((ad) => 
                    return (
                        <div key="ads.results" >
                            <p>ad.title</p>
                        </div>
                    )
                );
                this.setState( advertisements );
            )
            .catch((err) => 
                console.error("boom!: ", err);
            )
    
  render() 
    return (
      <div className="container-fluid">
        <div className="container">
            <h1>Dinamic</h1>
          <div className="row">
                        this.state.advertisements
          </div>
        </div>
      </div>
    );
  

我错过了什么重要的东西还是完全错了？

免责声明：这份工作是为 Web UI 开发人员准备的，但我认为这也很有趣

【问题讨论】：

尝试不使用cors。 fetch(url, mode: 'no-cors' )developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

这给了我一个不透明的响应，没用

【参考方案1】：

浏览器不允许从响应中读取禁止的标头，例如“set-cookie”，浏览器也不允许设置“Cookie”标头。所以我通过在 onProxyRes 方法中读取 cookie 并将其保存在一个变量中并在 onProxyReq 方法中的以下请求中设置保存的 cookie 来解决这个问题。

let cookie;
devConfig.devServer =   
  proxy: 
    '*': 
      target: https://target.com,
      secure: false, 
      changeOrigin: true, 
      onProxyReq: (proxyReq) => 
        proxyReq.setHeader('Cookie', cookie);
      ,
      onProxyRes: (proxyRes) => 
        Object.keys(proxyRes.headers).forEach((key) => 
          if (key === 'set-cookie' && proxyRes.headers[key]) 
            const cookieTokens = split(proxyRes.headers[key], ',');
            cookie = cookieTokens.filter(element => element.includes('JSESSIONID')).join('');
          
        );
      ,
    ,
  ,