My environment is Nodejs, and I want to make request(http) to api in the internet.
But there are some problems, after using webpack, the console would show me cross
domain error. I guess it is because my api and webpack-server have diffrent in
port. What should I do to solve the problem.
The issue you are experiencing is caused by the server not properly sending a CORS header to allow the request.
If the API is one of your own, you can enable CORS on your server for one, many, or all domains that attempt to access the API. How to do this depends on your server configuration.
If the API is provided by someone else, you may need to contact them or consult their documentation on how to perform a CORS request to their services.
Related
i am making a application by using REST API. the api provide me data but browser block for CORS policy. is it possible solve the issue from client side. or need to work at serve. i have try some nodejs package like cors-anywhere but still having issue
It is not possible to solve for good, because it is handled by server to control the origin request (The origin of the request(client) and the server must be in the same origin). But while you are developing you can use cors chrome extension, it will allow you to make the requests.
Chome extension.
Hope it helps.
I'm writing a small script to access an external API for work. I originally did this in Python and everything worked fine.
I was then asked to try and do it in Javascript. Now, I'm no programmer really, but I do know (or believe) that Javascript is largely for client-side, whereas PHP or Python are really for server-side operations. When I wrote the script in Python I had no problems, but in Javascript I get a
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
error. From what I've read about CORS here and similar questions on Stack, that makes sense, but I don't really understand why I don't get a similar error in Python or PHP...
I'm fairly new to this so I'm probably missing a number of things, but I'd really appreciate any insight anyone can give me. If I've left out any important info, please let me know.
From Mozilla's documentation:
For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest and Fetch follow the same-origin policy. So, a web application using XMLHttpRequest or Fetch could only make HTTP requests to its own domain.
Since Javascript in the browser uses XMLHttpRequest and fetch to make HTTP requests, they're subject to CORS policy enforcement.
More information on the reasons for CORS:
CORS is intended to allow resource hosts (any service that makes its data available via HTTP) to restrict which websites may access that data.
Example: You are hosting a website that shows traffic data and you are using AJAX requests on your website. If SOP and CORS were not there, any other website could show your traffic data by simply AJAXing to your endpoints; anyone could easily "steal" your data and thus your users and your money.
The external API you're using likely implemented a CORS policy intentionally. For example, if the API requires an application-level secret key for authentication, a CORS policy would discourage the use of that key in a public environment (namely the browser). Alternatively, the API may have a list of acceptable domain names for CORS that doesn't include the domain you're currently using.
Those are just a few examples; there could be any number of reasons for an API to implement CORS headers.
json data while follow the given link but it is worked when I integrate in our project.
https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670,151.1957&radius=500&types=food&name=cruise&key=AIzaSyCaLjRTWe0j9RKu9qG4_9VovLltLtU_hQ8
Servers can enable CORS, meaning that they will accept requests from other domains. However, each server is different and most APIs still do not allow cross-origin requests. It looks like api.geonames.org is one of these that does not support CORS.
Note that CORS only applies to requests sent from a browser. Hitting that API from a backend server (like Node or Rails) will work just fine.
I'm using an API from JIRA to get some information on bugs. Here's an example of the JQuery I'm using to get it:
var endpoint = 'https://jira.cyanogenmod.org/rest/api/latest/issue/CYAN-2631';
$.get(endpoint, function(data) {
do_stuff(data, data['fields']['project']['self']);
});
And, I'm getting the ever-terrible Access-Control-Allow-Origin error. It looks like this:
XMLHttpRequest cannot load
https://jira.cyanogenmod.org/rest/api/latest/issue/CYAN-2631.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://127.0.0.1:8000' is therefore not allowed access.
I'd really like to use this API if possible. Following the directions on this question didn't help. I got another error,
GET https://jira.cyanogenmod.org/rest/api/latest/issue/CYAN-2631callback=jQuery172039181585889309645_1431307158851?_=1431307165515
Seems to be a Jquery error, so I don't think that's the right approach. Maybe the server doesn't allow for jsonp.
Anyway, does anyone have a way around this or can I just not use this particular API? Thanks
There is no way to enable cross origin requests entirely from the browser without external code. If there was, it would entirely defeat the purpose of the security protections in the first place.
When using a browser, it is the server that decides if it wants to support cross origin requests or not and what domains it wants to support requests from. You cannot bypass it in the client.
The choices are:
Server enables CORs access from your domain or all domains.
Server supports JSONP allowing you to use it to work-around the cross origin access.
You create your own server proxy where you make a request from the browser to your own server (which would either be same origin or have CORS enabled), then your own server gets the data from the other site and returns it back to the browser. Servers are not limited by the same origin limitations as this is a security feature built into browsers only.
You find some third party proxy service that you can use to serve the same purpose as option #3.
FYI, a Google search turned up this article about enabling CORS on the API: https://answers.atlassian.com/questions/69356/cross-origin-resource-sharing-with-jira-rest-api-and-javascript. I don't understand enough about the service to quite follow the article, but maybe it points you in a helpful direction.
H-i, short answer is "yes".
The medium answer is "enable CORS on your application SERVER"
The long answer is here: http://enable-cors.org/
At some point you'll encounter the concept of a "pre-flight request", and you'll probably get confused.
That's because it's confusing, stupid, and poorly engineered. Just keep on going.
The easiest way to enable CORS is at your webserver (nginx or apache), although, you can enable it in the application itself.
The http://enable-cors.org/ site lists configurations for a variety of web servers and application stacks.
Good luck!
I have setup FineUploader on a site and I included a check box that allows users to upload files using HTTPS if the want to.
Unfortunately if the user accesses the site using http and then tries to use ssl it errors out, I assume because of CORS issues. I assume it is a CORS issue because if I access the site using https and try to upload using ssl it works fine.
I found some documentation about enabling CORS support, but it appears that you either need to make it so only CORS requests will be made or none will be made. In my situation there will be CORS request some times and not others.
Does anyone know of a good work around for this? Should I just reload the entire page using HTTPS when the checkbox is clicked?
If you're uploading straight to Amazon s3, see the note in the official docs, "SSL is also supported, in which case your endpoint address must start with https://" in the script within your uploaderpage.html file.
request: {
endpoint: 'https://mybucket.s3.amazonaws.com',
// Note that "https://" added before bucket name, to work over https
accessKey: 'AKIAblablabla' // as per the specific IAM account
},
This will still work if uploaderpage.html is served over http (or you could populate the endpoint value dynamically if you need flexibility re endpoint).
This will help you avoid the mixed content error when uploading over https, "requested an insecure XMLHttpRequest endpoint", which happens if the page is https but you request a http endpoint.
Just to reiterate what I've mentioned in my comments (so others can easily see this)...
Perhaps you can instantiate Fine Uploader after the user selects HTTP or HTTPS as a protocol for uploads. If you must, you can enabled the CORS feature via the expected property of the cors option. Keep in mind that there are some details server-side you must address when handling CORS requests, especially if IE9 or older is involved. Please see my blog post on the CORS feature for more details.