Laravel and vue not submitting data not querying data from database - vue.js

Helo,am new in Vue.js,am using laravel and vue to practice some crud application. It does not submit nor query data,,
It gives this error when i view on the chrome;
Access to XMLHttpRequest at 'http://localhost:8000/items' from origin 'http://laravelvue2.test' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

You need to respond with Access-Control-Allow-Origin header when accessing backend from differend domain. In this example the value of Access-Control-Allow-Origin must be http://localhost:8000.
Adding header to your response is quite easy in laravel: https://laravel.com/docs/5.7/responses#attaching-headers-to-responses
You can also use this library: https://github.com/barryvdh/laravel-cors

Related

Vue + Axios: Making a GET request to a third-party website throws CORS error

I'm trying to make a get request to a third-party website from my vue app. It's a public website, such as stackoverflow.com for example.
mounted() {
axios.get('https://stackoverflow.com/')
},
I'm getting this:
Access to XMLHttpRequest at 'https://stackoverflow.com/' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Same thing happens if I upload my project on a web server. It works fine if I make the request from an Express.js app.
Is there a workaround for this? I really don't understand why it would work from a server and not from a browser. I also tried uploading the project on a web server, still the same.
Seems like its because you are requesting a HTTPS resource from localhost which is HTTP by default. Try requesting HTTP only?
Alternatively, add the Access-Control-Allow-Origin: '*' header to your request.
Also, I recommend also using the vue-axios library to configure your axios.
For example
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);
First complete your header request then convert your lifecycle to created

Access-Control-Allow-Origin Openstreetmap problem

Hi I'm trying to use http://nominatim.openstreetmap.org/searchformat=json&q= on a WordPress site to get long and lat from an adresse to set markers on a leaflet map and it works fine as long a I'm logged in as an admin but when I'm not I get this error
Access to XMLHttpRequest at 'http://nominatim.openstreetmap.org/search?format=json&q=3%20rue%20du%20G%C3%A9n%C3%A9ral%20Leclerc,%20Schwindratzheim' from origin 'http://isad-confort.projet-maquette.fr' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I can't find an answers that I understand on how to set the header Access-Control-Allow-Origin, can someone explain me what I should do.
I solved it juste needed to change my request from
jQuery.get(location.protocol + '//nominatim.openstreetmap.org/search?format=json&q='
To
jQuery.get('https://nominatim.openstreetmap.org/search?format=json&q='
Thanks peeebeee

How to enable CORS for Catalyst

Having a Perl Catalyst application, which produces JSON, I need to read that JSON content using jQuery within an HTML page, served by an Apache server. Both applications, Catalyst and Apache are running on the same host.
When I access the Catalyst URL from Apache I get the error
Access to XMLHttpRequest at 'http://localhost:3000/abc/json_list' from origin 'http://localhost:8888' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
As I red in many topics, a header (or more) must be set. In this case the Catalyst must be set but I don't know how.
Any hint?
Catalyst allows you to set response headers using the header method on the response object.
$c->res->header( "Access-Control-Allow-Origin" => "http://localhost:8888" );
Consider using a controller's sub auto or using existing middleware if you have multiple endpoints that need to provide permission via CORS.

LinkedIn share API fails with "Response to preflight request doesn't pass"

i am using api call to share post on company page , when i do this from localhost it works fine, but when i put it on live VPS it fails
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin "MY ADDRESS I REMOVED FOR MY SECURITY" is therefore not allowed access.
I have googled it and found that it is a problem with the CORS headers , i have tried to add Header set Access-Control-Allow-Origin "*" in .htaccess i set but still nothing, any and all pointers or fixes would be appreciated , thanks
i use php 5.6 and apache 2.4.18
Adding this as answer so that anyone can find it. As #HoldOffHunger suggeted.
Ok so i managed to fix this error by adding headers not only to .htaccess but also to my ajax calls and it is working, so if you have same error fix it by adding Access-Control-Allow-Origin "*" headers in ajax call, change "*" with your origin.

Get an API key from external site

I have a site, which uses where2GetIt API. I need to get some data from this site,
but after making request, I get "No 'Access-Control-Allow-Origin' header is present on the
requested resource. Origin 'null' is therefore not allowed access" error.
I assume, that the problem is, that I have not access to API. How can I get the access to API?
If you're doing this with Javascript, make sure you understand CORS
...CORS gives web servers cross-domain access controls, which enable
secure cross-domain data transfers. Modern browsers use CORS in an API
container - such as XMLHttpRequest - to mitigate risks of cross-origin
HTTP requests.
See also this StackOverflow question How does Access-Control-Allow-Origin header work?