In my flutter web when I'm trying to show network image, I'm getting an error of CORS.
Access to XMLHttpRequest at 'https://my-network-image-url.jpg' from origin 'http://localhost:63785' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Its working properly in my Android/iOS Mobile Apps.
I already fetch same issue in my backend php api.
At that time adding headers in php file solve the issue.
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-Requested-With,content-type");
I'm confuse how to add header in image get request.
Sorry If I'm asking same question again.
But I could not find proper solution for this.
Thanks in Advance.
You can mock the calls from any other endpoint which allows all cross origins like I have used the following,
String allowCORSEndPoint = "https://api.allorigins.win/raw?url=";
And while making a call you can use a a variable like this,
import 'dart:html' as html;
http.Response response = await http.get(
Uri.parse(allowCORSEndPoint + url),
);
Related
My task is to call the link in web using flutter through the GET method and get the html which in the future I want to show on the same page where I am.
Here is an example:
final response = await http.get('SOME URL',
headers: {'Access-Control-Allow-Origin': '*'});
if (response.statusCode == 200) {
print("200: Try to get HTML");
// TODO get HTML from response
return jsonDecode(response.body).toString();
} else {
// If the server did not return a 200 OK response,
// then throw an exception.
throw Exception('Failed to load album');
}
The problem is that when I initialize the page, I call this link, but the browser blocks and does not allow calling
Error example:
Access to XMLHttpRequest at 'URL' from origin 'http://localhost:55827' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
As far as I could figure it out, the problem is that I call some other link on the localhost and because of this the CORS blocks.
I could not find a solution to this problem. Please help me how, during initialization, could I call the GET method with url and take html from the response ?
You need to allow cross origin request in the backend page you are using, not in http header. The command if different depending on the language you are using i.e. php, node js, python etc. for your backend.
Like if you are using PHP then you have to specify this header -
header('Access-Control-Allow-Origin: *');
I am getting a preflight error 405: Method not allowed from the HERE API when I request autocomplete as per the documentation.
UPDATE 2:
I have since determined that Axios was adding my default.common authentication headers from my app's API client onto the HERE API client. Axios is supposed to keep those defaults separate per-client, but it seems that it doesn't ... at least not the version I have. I replaced the defaults with a per-client request interceptor and it worked fine. The request no longer triggers an OPTION pre-flight. No issue with HERE's API other than that it doesn't support OPTION method.
UPDATE:
The reason it fails is because HERE does not support the OPTIONS method, only the GET. So now the question is: Why does axios trigger an OPTIONS request when I don't set any headers? An XMLHttpRequest() based GET request does not trigger OPTIONS for the same URL. Something is happening with axios but I don't know what and I can't seem to investigate the headers that axios is sending.
ORIGINAL:
I've tried to find information about this error, as well as HTTP vs HTTPS. I haven't seen others having this problem so I feel like I must be making a simple error. The URL is generated correctly because it works when pasted directly into the browser for example.
const hereClient = axios.create({
baseURL: 'https://autocomplete.geocoder.api.here.com/6.2/'
})
async function searchHere (query) {
let searchTerms = query.split(' ').join('+')
let result = await hereClient.get('suggest.json', {
params: {
app_id: '<APPID>',
app_code: '<APPCODE>',
query: searchTerms
}
})
return processHereSearchResults(result.data)
}
The GET request fails on the OPTION preflight with a 405: Method not allowed. But if I paste the generated URL into a browser then it returns the expected results. For example:
https://autocomplete.geocoder.api.here.com/6.2/suggest.json?app_id=APPID&app_code=APPCODE&query=8131
returns:
{"suggestions":[{"label":"Česko, Brandýs nad Orlicí, 3123","language":"cs","countryCode":"CZE","locationId":"N . . .
Same result whether http or https.
I have since determined that Axios was adding my default.common authentication headers from my app's API client onto the HERE API client. Axios is supposed to keep those defaults separate per-client, but it seems that it doesn't ... at least not the version I have. I replaced the default header setting with a per-client request interceptor to set my authentication and it worked fine. The request no longer triggers an OPTION pre-flight. No issue with HERE's API other than that it doesn't support OPTION method.
I keep receiving the error below when I use Ionic Serve...
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
It only occurs with "post" request. The "get" requests I have work with no error. I've seen documentation for proxy's but I was not looking to go that route. I'm currently using the CORS Chrome plugin as a workaround right now, but will be shipping to mobile soon (Ionic view) for testing, which I believe I will still run into the CORS issue using Ionic View.
I have control of the API/server - using nginx.
Any suggestions?
Cors will not affect to mobile phone. The issue is in POST method in web view. In Post methods Browser send OPTIONS Request for security Purpose. It should handle in API. I used ASP.NET WEB API When Using localhost I Used Two Methods for post in Same Name but it's not proper way for doing this. You need to handle in Configuration to Igonre this. If you have API without parameters add headers "content-type x-www-form-urlencoded" to you request header. If there are parameters. use another method without parameters using same name.(Method overloadin). But when you are using livehost don't forget to remove redundant methods.
I'm trying to use Javascript Preview SDK to read all files in box account from my web application. I would like to see a preview of all files on my box account from my custom web application. There is some way to use a default ID that allow me to read all folders and files in the box account?
Currently, I'm trying to use:
Box.Preview.show('FILE_ID',{
token: access_token,
container: '.preview-container',
showDownload: true
});
The access_token is obtained through the procedures described in this page. Besides, using the code above I obtain this error:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 404. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
How can I set request header using Javascript Preview SDK?
Thank for the response.
You have to add the URL of your app (http://localhost:3000) to the CORS Allowed Origins text area. You can find this field in the form you used to create your application, the same form where you also obtained the Developer token. Note: Avoid the use of trailing slashes in the URL.
One of the method that I am testing sends a XMLHttpRequest to "http://localhost:4848/qrs/extension/schema?xrfkey=asdfasdfdf". I am getting an error which looks like this -
XMLHttpRequest cannot load http://localhost:4848/qrs/extension/schema?xrfkey=asdfasdfdf. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9875' is therefore not allowed access. The response had HTTP status code 404.
Now I understand that test are served on "localhost:9876", and trying access localhost:4848 is actually violating cross domain policy. I have seen the karma proxy settings and tried -
proxies: {
'/qrs': 'http://localhost:4848/qrs'
}
But doing this actually serves my content from "http://localhost:9876/qrs/extension/schema?xrfkey=asdfasdfdf". But this way my client code will not work. Because client code directly sends XHR request to "http://localhost:4848/qrs/.....", but NOT to "http://localhost:9876/qrs/.....".
Any suggestion how can I solve this?
Also, wouldn't it be better to have an option to set different headers in the config file? At lest we know that we are talking about test here (I mean not in production).
Thanks in advance.