Vue
I don’t manage to call an API from Vue.js #6281
-
|
Hi! It’s my first week of Vue.js, so I may totally have missed something :-) ContextI wrote an API (a POC for now), for which I want to write a web front-end with Vue.
My problemNote: the request I’m working with for now is the simplest one on the API: not authenticated; same result for everyone. Here is the code that fails: import { defineStore } from 'pinia';
import { useConfStore } from './conf';
export const useGroupsStore = defineStore('groups', () => {
const confStore = useConfStore();
let groups = [];
function refresh() {
const api = confStore.conf.api;
const headers = new Headers();
const params = { method: 'GET', headers: headers };
const url = `${api.scheme}://${api.host}:${api.port}${api.path}/groups`;
console.log(url);
fetch(url, params)
.then(response => response.json())
.then(json => groups = json.groups)
.finally(console.log(groups));
}
refresh();
return { groups };
})Vue is serving on Some queries with $ curl -iX OPTIONS http://localhost:8080/git/api/v1/groups
HTTP/1.1 204 No Content
Server: nginx
Date: Sat, 16 Jul 2022 13:43:34 GMT
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Max-Age: 2592000
Access-Control-Allow-Credentials: true
$ curl -iX GET http://localhost:8080/git/api/v1/groups
HTTP/1.1 200 OK
Server: nginx
Date: Sat, 16 Jul 2022 13:44:49 GMT
Content-Type: application/json; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
{"groups": [{"id": "Bobs"}]}
$ curl -iX GET http://localhost:3000/git/ui/
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Content-Type: text/html
Cache-Control: no-cache
Etag: W/"198-NDVaPqNxxUSufwJ+SyoT26lA3GU"
Date: Sat, 16 Jul 2022 13:46:57 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Content-Length: 408
<!DOCTYPE html>
<html>
<head>
<script type="module" src="/git/ui/@vite/client"></script>
<meta charset="UTF-8" />
<link rel="icon" href="/git/ui/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>light-forge</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/git/ui/src/main.js"></script>
</body>
</html>When I display my page, the Firefox console shows: Translated to English: “Blocking of a multi-origins request (Cross-Origin Request): the “Same Origin” policy does not allow to consult the remote resource on http://localhost:8080/git/api/v1/groups. Reason: the “Access-Control-Allow-Origin” CORS header is missing. Status code: 200.” Do I have to trigger the preflight request myself? I thought it was automatic… |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
I don't think this is a problem with Vue. This is the Vite docs about |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @liulinboyi, I’ll read that. |
Beta Was this translation helpful? Give feedback.
-
|
In the end, I fully handled CORS, as I did not manage to do otherwise. So:
|
Beta Was this translation helpful? Give feedback.
In the end, I fully handled CORS, as I did not manage to do otherwise. So:
Access-Control-Allow-Origin: *if noOriginheader was received,Access-Control-Allow-Origin: _Origin_(actual value) if anOriginwas received.