Fix CORS Error [SOLVED] | React Tutorial
Why Stack Overflow recommends it
Stack Overflow users link it when answering React CORS and proxy questions, either as a walkthrough for setting up a dev proxy or when their own setup built on it breaks.
Recommended by 3 people across 3 different months, 2020 to 2022.
What it is
A roughly 30-minute screen-recorded tutorial from Hong Ly Tech on diagnosing and fixing CORS errors in a React app. It covers temporary workarounds like a CORS-free Chrome or a browser plugin, then shows a proper fix using a proxy via http-proxy-middleware's setupProxy.js.
What people said
Recommends VonC · 2020-03 · Stack Overflow · on “Github pages react app didn`t get response”
GitHub pages supports CORS since 2015 [LINK] , so you can follow " Fix CORS Error| React Tutorial [this video] " which points to: " Run Chrome browser without CORS [LINK] " (not recommended, just for testing) axios/axios issue 853 [LINK] That last issue mentions: cURL does not enforce CORS rules. Those rules are enforced by browsers for security purposes. When you mention that you added the relevant header, I assume you mean you added those headers to the request. Actually, the header is expected in the response headers from the server, indicating that the resource is allowed to be accessed by other websites directly . FYI, CORS - Cross Origin Resource Sharing. Since your API does not support it,
Recommends Four · 2021-09 · Stack Overflow · on “Can not get image from api when using http-proxy-middleware in React.Js”
i got cors error and fixed it when using http-proxy-middleware according to video tutorial [this video] (Skip to solution: 20:08, i have followed and it is like below). everything is fine until i get the picture from the api. Did I miss something? here's my setupProxy.js const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { // GET Image app.use( "/file/", createProxyMiddleware({ target: " [LINK] ", changeOrigin: true, }) ); }; and user.js const loadImage = () => { setLgShow(true); var myHeaders = new Headers(); myHeaders.append("Authorization", "Bearer abcdefghiklm"); myHeaders.append("Content-Type", "application/json"); var requestOptions = { metho
Recommends CodeNoob · 2022-07 · Stack Overflow · on “React App Not Loading When Using http-proxy-middleware”
Had the same problem as you where my react app wasn't loading because of http-proxy-middleware. Different problem/solution, but for people that also had this problem, and were following this youtube video [this video] The tutorial has const proxy = require("http-proxy-middleware") instead of const {createProxyMiddleware} = require("http-proxy-middleware") After I made that change, my issue was solved. Don't forget to change "proxy" to "createProxyMiddleware" in app.use() as well
Cites Agent K · 2022-05 · Stack Overflow · on “Second axios function not running after first one is called - React”
The scraping works when I added "proxy": "[domain name]" in package.json and removed the domain names from the links I use in my project. From: [this video]