mounted(){
this.$http.get('http:anotherurl.com/api/data.xml')
.then(function (response) {
console.log(response);
});
}
i get this console error :
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
i test vue-resource with reddit and it worked fine but with this url gives the problem . please help .
The people who set up anotherurl.com have configured it to not allow requests via JavaScript from sites other than their own. This is a feature of HTTP / CORS.
For further reading, the Mozilla documentation explains a little more about what is going on:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Origin
If you are using chrome you can get an extension to ignore xframe-headers. don't know how to solve it in production though
I would say that as vue-resource is deprecated from 2.0 v you should look at newer API like this one here - https://github.com/mzabriskie/axios
Axios is powerful-promise based HTTP client for the browser and node.js
Related
I am new to Ionic framework (with Vuejs) and trying to make simple Crud app. But due to CORS issues, i can't able to login.
Browser console show XMLHttpRequest at 'http://localproject.test/api/login' from origin 'http://localhost:8100' has been blocked by CORS policy
I tried a lot of different solutions, without success Please help.
Thanks in advance.
You will allow CORS from your backend. If you want to resolve CORS issue from your end you will use ionic HTTP native plugin link. This is not recommended because you can't track requests from your network tab.
my suggestion you need to resolve your CORS issue from your backend.
If your app will be running on browser, use Proxy server.
Example: I want to post to http://localproject.test/api/login.
In package.json, I will add this line:
"proxy": "http://localproject.test/api"
My POST request in Login component:
axios
.post("/login", loginData)
.then((response) => {
...
}
return response.data;
})
.catch((error) => {
...
});
I have a Laravel 7 application and I'm trying to access an external URL in a Bootstrap model window. When I use the below jQuery function, on button click, I want to load the model and show the external website.
$('#myModal').on('show.bs.modal', function (e) {
$(this).find('.modal-body').load('http://***.com');
});
I get the bellow error.
Access to XMLHttpRequest at 'http://****' from origin 'http://****'
has been blocked by CORS policy: Response to
preflight request doesn't pass access control check: Redirect is
not allowed for a preflight request.
I have searched and found one solution to use middleware. I created the middleware file in app\http\Middleware\Cors.php.
public function handle($request, Closure $next)
{
return $next($request)
->header('Access-Control-Allow-Origin', '*')
->header('Access-Control-Allow-Methods',
'GET, POST, PUT, DELETE, OPTIONS')
->header('Access-Control-Allow-Headers',
'Accept,Authorization,Content-Type');
}
After that I have added the following in app\http\Kernel.php.
protected $middleware = [
....
...
\App\Http\Middleware\Cors::class,
];
But I still get the same error. How can I fix this error?
Laravel 7 has been released in March and provides built-in support for CORS so developers don't need to use third-party packages to enable CORS in their Laravel apps.
You can use config/cors.php file for your cors settings.
For more details please follow the link - https://www.techiediaries.com/laravel/laravel-7-6-cors-example-and-tutorial/
Since you didn't explicitly mention it I'll assume you didn't do this:
you have to enable CORS for every route you want to use it with.
According to:
https://github.com/fruitcake/laravel-cors
There can be CORS on Both side on
1 API side at external URL. ( this you cannot change)
2 At your bootstrap Laravel application.( this you can change)
$('#myModal').on('show.bs.modal', function (e) {
$(this).find('.modal-body').load('http://***.com');
});
This is just a Jquery code. Can you convert this code to some server side language like php?
Remember CORS can be overridden by server side code.
I have a Vue.js project wrapped in an Electron app. From one of my components (src/components/MoviesTable.vue), I'm making an axios call to a local JSON file (public/data/multimedia.json), like this:
axios.get('./data/multimedia.json').then(res => {
this.movies = res.data.movies;
})
When I run npm run serve to serve the Vue app, I experience no issues. However, when I build the Electron app, I receive the error:
Access to XMLHttpRequest at '.../multimedia-index-app/dist/data/multimedia.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
I've tried using proxies to no avail. I know that similar questions about CORS have been asked on SO, which offer different solutions, but I'm a noob, and I need clearer instructions than the ones that I've come across.
Please let me know if you require more information. Any help in resolving this problem would be greatly appreciated.
Thanks in advance.
If the JSON file should be bundled with the app, you don't need Axios, you can have Webpack load it:
import movies from './data/multimedia.json';
And use it in the component:
export default {
data() {
return {
movies
}
}
}
I have a standard HTTPS Axios request from my Frontend (which is based on Vue), to the our company's API which is on another server(server use SSL sertificate).
testApi() {
axios.get('https://rng-hub2.staging.rng:8001/rng/3/')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});
},
Which cause an error like this:
In Firefox:
In Chrome the error looks like this:
As I was thinking, in browsed developing tools under tab of Netwerk -> Response, I should also see an error, which is true for Chrome, but eventyally is not true for Firefox.
So Chrome shows me:
But in the Firefox I receive my data in exactly right format:
Have any idea how I can retrieve this data correctly and assign it to the response variable in .then section?
About Cross-Origin Request Blocked error: API's server administrator told me, that he have added my IP to the CORS "trusted list". However I'm not sure, because according to this post: https://jonhilton.net/cross-origin-request-blocked/
in my Response Header I should receive an additional header with my local IP like:
Access-Control-Allow-Origin: http://192.168.32.44
But I'm not.
This proxy staff also didn't work:
How to deal with CORS error on Vue CLI 3?
Please give me hint what am I doing wrong
Found the solution. The problem was deeper then I thought. So short answer is: If you are working in local network, with different API servers, they might be certified with inner corporate CA (Certificate authority) to be able to communicate via HTTPS protocol. So what you need is, to ask from your server administrator to give you private_key with which you gonna sign all the request to a specific API. In guzzle its looks like this:
new GuzzleClient(['verify' => '/path/to/self-signed/cert.pem']);
I'm using axios and vue.js to play with the Fortnite Tracker API.
In their documentation it's clearly said that we need to include the "TRN-Api-Key" in header.
I tested with Postman and It works.
And this is my axios function to make the request:
let url = `https://api.fortnitetracker.com/v1/profile/${this.platform}/${this.username}`;
// username and platform are from my Vue Component.
axios.get(url, {
headers: {
"TRN-Api-Key": "xxxxxxxx-xxxx-xxxx-xxxx-xxxx" // of course from my account on their website.
}
})
.then(response => console.log(response.data))
I expect the output in json like in Postman but I had a 404 Error: "Network Error".
And in the Browser Network Debug I can't see the request header 'TRN-Api-Key'.
[EDIT]
If your app is running on a server you can write a short PHP-Script and use curl in it to access the API (I think it's even possible to generate PHPcode from Postman).
Just address this script with axios and submit your platform and usernameproperties to build the right url.
Or have a look at this post alternatively. Maybe the use of an other API like #kecinotrab provided in the acceptet answer will help you too.