Develop Reference

How to bypass CORS policy when sending get/post request from React JS?

From my React JS app , I need to fetch data from servers in other domains.
However, I am prevented by CORS policy and not able to fetch the data.
Let us assume that my React app is running on localhost:3000 during the development.
I want to make get/post call to another server running on http://myserver.com
The URL through which I want to fetch the data is http://ext-server.com/data/records?name=xyz
I have installed http-proxy-middleware thru npm and using it in my react app.
Created a setupProxy.js file under src folder with below content :
const { createProxyMiddleware} = require("http-proxy-middleware")
module.exports = app => {
app.use(
createProxyMiddleware('/data/records' , {
target:'http://ext-server.com',
changeOrigin: true
})
)
}
On the landing page of my react app (firstpage.js) when http://localhost:3000 is hit , I have added below piece of code to the button event that makes the get call to the http://ext-server.com
getTheData() {
let url = "http://ext-server.com/data/records?name=" + encodeURIComponent(this.state.name);
axios.get(url,
{
headers: {
"Content-Type":"application/json;charset=UTL-8",
"Access-Control-Allow-Origin": "*",
Accept: "application/json",
},
baseURL: 'http://ext-server.com'
}
).then((response) => {
console.log(response["access_token"]);
}).catch(error) => {
console.log("Error: ", error)
}).then(function () {
console.log("always call it")
});
}
In the package.json , I have added :
"proxy": "http://ext-server.com",
"homepage":"http://localhost:3000",
But I am still getting below error:
Access to XMLHttpRequest at 'http://ext-server.com/data/records?name= ' from origin 'http://localhost:3000' has been blocked by CORS policy.
Is there anything that I am missing here ? what is the correct way to use this http-proxy-middleware?
Any help will be very useful!
Thanks

As you can see from MDN the "Access-Control-Allow-Origin": "*" header is a response type header, this means that it should go to in your server response. Also I advise you to not use the * symbol, instead I would rather match it with the origin header in your Request.

The CORS policy is one and only administered by the web server and its settings. To allow CORS requests it has to be implemented on server side. No chance to do it from your client application.
Basically its just a header setting (below example for NodeJS):
res.header("Access-Control-Allow-Origin", "*")
Sending that header will allow requests from every domain.

Bugsnag from a browser: is there a way I can add my own header?

Using "#bugsnag/browser": "7.5.6"
I have configured bugsnag to send requests to a custom endpoint by doing:
Bugsnag.start({
...
autoTrackSessions: false,
endpoints: {
notify: 'htts://custom-notify-url.example.com',
sessions: 'https://bugsnag-sessions.example.com',
},
onError: async function (event: any) {
console.log("bugsnag error event", event);
},
})
This works, and sends requests to custom-notify-url.example.com
But I need the bugsnag requests to have a specific header.
Is it possible to configure bugsnag so that it applies a custom header to the notification POST request?

Bugsnag's error reporting API, which is what all of their libraries use, doesn't support passing custom fields in the header. If you are ultimately forwarding events to notify.bugsnag.com, you will not be able to have a custom header - you also can't override the header for a custom endpoint.

How to accept to a api access by webpack?

I'm developing on webpack-dev-server.
When I try to access http://api.openweathermap.org/data/2.5/forecast?id=2848756&appid={api_key}, I couldn't access and I can see a this log.
XMLHttpRequest cannot load http://api.openweathermap.org/data/2.5/forecast?id={api_key}. Response for preflight has invalid HTTP status code 405
I try to set on webpack.config.js. it's like bellow setting.
devServer: {
contentBase: 'dist',
inline: true,
hot:true,
port: 8081,
proxy: {
'/**': {
target: 'http://api.openweathermap.org',
secure: false
}
}
But It still doesn't work. do you know how to resolve it?
Let me know about that. thanks!

Try removing the headers property from your axios.create() call, they don't make sense (the Access-Control-* ones are response headers, not request headers, and withCredentials is an option, not a header) and may confuse the browser into thinking it needs to perform a CORS preflight that doesn't look like it's supposed by the OpenWeather API server:
const apiClient = API_URL => {
return axios.create({
baseURL : API_URL,
timeout : 100000,
withCredentials : 'true'
});
};

You will have to Register on open weather API website after that you will get API key which you will have to use for calling API
in your case while calling
http://api.openweathermap.org/data/2.5/forecast?id=2848756&appid={api_key}
please insert api_key after registration in above call.
suppose after registration you get api_key as =xxxxxxx
use it in above call
http://api.openweathermap.org/data/2.5/forecast?id=2848756&appid=xxxxxxx
then and then you will receive data in JSON response.
for more information visit
https://openweathermap.org/appid

Ionic using Bing Maps Proxy failing and Access-Control-Allow-Origin issue

I'm currently working on my first hybrid application and I'm having an issue with CORS. The Bing MAP API doesn't allow localhost or an actual device to call their Rest API. I've tried to reach Bing two different ways.
First attempt was with the url in my service and all urls whitelisted in the config.xml but I reached and error.
Second was to proxy the url, which is a query url. I'm not sure how to proxy a query url so I've been using a reformatted test url, but that keeps getting a 404.
Anyone know how I can fix my CORS issue? Thank you in advance
'Approach 1`
service.js
function getUserAddress() {
var uriQuery = http://dev.virtualearth.net/REST/v1/Locations/point?point=40.444009, -77.774055&includeEntityTypes=Address,Neighborhood,CountryRegion&includeNeighborhood=1&output=json&key=(removed);
return $http({
method: 'GET',
url: uriQuery,
}).then(function (response) {
console.log("location data set", response);
return getNearbyEvents(response);
}).catch(rxEventsService.onRequestFailure);
}
Config.xml
<access origin="*"/>
<allow-navigation href="*"/>
Error in Chrome
XMLHttpRequest cannot load http://dev.virtualearth.net/REST/v1/Locations/point?point=40.444009,-77.77405&include…=json&key=(remove :) ). No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 404.
Approach 2
gulp.js
// webserver: Create local webserver with livereload.
gulp.task('webserver', function () {
gulp.src('./www')
.pipe(webserver({
fallback: './www/index.html',
host: '0.0.0.0',
port: 8080,
proxies: [{
source: '/_bingmaps',
target: 'http://dev.virtualearth.net/REST/v1/Locations/point?point=40.444009, -77.774055&includeEntityTypes=Address,Neighborhood,CountryRegion&includeNeighborhood=1&output=json&key=(removed)'
}]
}));
});
constants.js
(function () {
'use strict';
angular.module('rxEvents').constant('rxUrls', {
reverseGeoCoding:'/_bingmaps',
bingMapsKey:'(removed)'
});
})();
service.js
function getUserAddress() {
return $http({
method: 'GET',
url: rxUrls.reverseGeoCoding,
}).then(function (response) {
console.log("location data set", response);
return getNearbyEvents(response);
}).catch(rxEventsService.onRequestFailure);
}
Error
ionic.bundle.min.js:135 POST http://localhost:8080/_bingmaps 404 (Not Found)

The Bing Maps REST services are JSONP enabled services. Here is a blog post explaining how to access this service using various JavaScript frameworks: https://blogs.bing.com/maps/2015/03/05/accessing-the-bing-maps-rest-services-from-various-javascript-frameworks/

301 Redirect Preventing CORS OPTIONS Request on Openshift

I'm writing a RESTful api with Laravel 4 that will be used by a Backbone.js app.
When I deploy my code using GIT, I receive a message saying:
Application directory "public/" selected as DocumentRoot
When using the Backbone.js app, PUT, GET and DELETE requests are handled appropriately, but the preflight request (OPTIONS) fails because of the redirect when I try to make a POST request:
Request Method: OPTIONS
Status Code: 301 Moved Permanently
With this error on the console:
XMLHttpRequest cannot load http://MY-DOMAIN.rhcloud.com/projetos/. The request was redirected to 'http://MY-DOMAIN.rhcloud.com/projetos', which is disallowed for cross-origin requests that require preflight.
This happens because of the CORS Policy:
If the response has an HTTP status code of 301, 302, 303, 307, or 308
Apply the cache and network error steps.
How can I overcome this problem? Is there a way to bypass or configure the Openshift redirect?
>>>EDIT
I am getting this error on the Chrome javascript console, because my Backbone App is in development fase still. Here the steps to replicate the problem:
I have a global namespace "App", and my project is organized in this form: App.Models, App.Collections, etc.
The Model
App.Models.Projeto = Backbone.Model.extend({
defaults : {
codigo : '',
titulo : '',
url : '',
status : ''
}
});
The Collection
App.Collections.Projetos = Backbone.Collection.extend({
model : App.Models.Projeto,
url : 'http://MY-DOMAIN.rhcloud.com/projetos'
});
On the Console
var projetos = new App.Collections.Projetos;
projetos.create({
titulo : "blablabla",
codigo : "12jk4h3",
url : "example.com",
status : 0
});
I am able to fetch, edit and delete models in the collection. The only thing I cannot do is to create a new one.
One last thing, the URL I'm redirected to is the same URL, but without a "/" at the end.
So even if the "url" property in the collection is set to http://MY-DOMAIN.rhcloud.com/projetos it seems like Backbone adds a "/", and then in the server, it gets redirected.