Webpack config to consume an API with no CORS header - reactjs

Question

I need to consume a public API with no CORS header in it. I'm very new in webpack so i take this approach by readind articles. The scaffolding is provided by the company. This is a second part from a exercise for a job.
I been looking for hours and nothing seems to help. I always get the same response No 'Access-Control-Allow-Origin' header is present on the requested resource ...
This is my webpack.config.js at the moment
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' ]
}
};
my dependecies are:
"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"
}
and this is my jsx file which is a simple component to render an advertisement
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>
);
}
}
Did i miss something important or this is completely wrong?
Disclaimer: The job is for Web UI developer, but i think this is also fun to learn

Answer 1

The browsers don't allow reading forbidden headers like 'set-cookie' from response and browser also does not allow setting 'Cookie' header. So I resolved this issue by reading cookie in onProxyRes method and saving it in a variable and setting the saved cookie on following request in onProxyReq method.
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('');
}
});
},
},
},
}