I have deployed my NuxtJs project and Laravel Api on IIS Window Server. Previously there was CORS error someone recommended to use proxy but on server the proxy url always response 404 error
Below is my nuxt.config.js
modules: [
'#nuxtjs/axios',
'#nuxtjs/auth-next',
'#nuxtjs/proxy'
],
axios: {
baseURL: '/',
proxy: true,
headers: { //optional
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json',
}
},
proxy:
{
'/api/': {
target: 'http://hrmapis.mygwambo.com',
pathRewrite: {'^/api/': ''},
changeOrigin: true
}
},
I use Axios to get cookies from http://localhost/sanctum/csrf-cookie
My app doing requests from localhost:3000 which is configured by Nuxt.
My backend configured by Laravel sanctum at localhost:80
After the GET request, I have the following cookies set in my headers:
Set-Cookie: XSRF-TOKEN=eyJpdiI6InkvSWhzeUtnYzNpck5NSGozS09IVVE9PSIsInZhbHVlIjoiRmR1RVdmYW8zaXYxeWZUNFNjZmkyNjRVKzZQMGk4MExsK3JmOVRPN0s3M3FGK3V1eFpLaTNRYnhhbExvTW5BbmFqVGN2SWRBdUVZcUJkWEJabnJQakEwN1pYNUk1NDBtRFhRSllkTk45ZHZuRWFUZmc5NHViK21JUTVkWFZhZDEiLCJtYWMiOiI5NjBkMWY5YWFmZTgwODE4ZjIzMzdjMjkxMzk3Zjk3YWU0YmI1ZGUzNzAyMmQzZWVhMWQzM2NmYWEwYjdhYTcxIiwidGFnIjoiIn0%3D; expires=Sat, 01-Oct-2022 16:14:59 GMT; Max-Age=7200; path=/; domain=localhost:3000; samesite=lax
Set-Cookie: laravel_session=eyJpdiI6InhNRVBDT1ovanR4QVdzakNHd1YxekE9PSIsInZhbHVlIjoiajNGUGdxa1NJemxiSGIrc1pwZ3VrNFJBbmd6QnFMZkZmZHdWK3ZPSzVWdGZydHBQTGNPRmpocVN3d1lTcTE1d0RLdWFNNEJPbjhLKzVPaEpvSTZzUm5RQWZaQ0ZHVlAxeElBVkErN2hOUnFRTm8wVGJrUllaNXNmTm50N1plTFoiLCJtYWMiOiIxNGZmNTYzYmFkMmY2NjAzNGQwMTIwMzhlYWNjYTI4MjQzNTM0N2Y4Mzk3MzkwYTdmYzU4MDFiMGVkZGU3NjVjIiwidGFnIjoiIn0%3D; expires=Sat, 01-Oct-2022 16:14:59 GMT; Max-Age=7200; path=/; domain=localhost:3000; httponly; samesite=lax]
But there are no cookies in the application tab:
What is wrong?
In your .env file add
SESSION_DOMAIN=.localhost
Check CORS
'paths' => ['*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'], // All origins
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,
For your nuxt project, use #nuxtjs/auth-next package.
The real problem was wrong credentials support in axios module.
This should be the credentials: true, rather than withCredentials: true
axios: {
credentials: true,
baseURL: "http://localhost", // Used as fallback if no runtime config is provided
// withCredentials: true,
headers: {
common: {
"Access-Control-Allow-Origin": "*",
'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
'Access-Control-Allow-Credentials': true
},
delete: {},
get: {},
head: {},
post: {},
put: {},
patch: {},
},
},
I am using https://www.npmjs.com/package/cypress-testrail-reporter (version 1.2.2), have everything setup in cypress.json, when executing the spec file through the CLI I can see that the run id is being created and I can see it in TestRail but the test case itself is not being updated in TestRail. I am getting this weird log:
at createError (/Users/xxxxx/xxxxx/xxxxx/node_modules/cypress-testrail-reporter/node_modules/axios/lib/core/createError.js:16:15)
at settle (/Users/xxxxx/xxxxx/xxxxx/node_modules/cypress-testrail-reporter/node_modules/axios/lib/core/settle.js:18:12)
at IncomingMessage.handleStreamEnd (/Users/xxxxx/xxxxx/xxxxx/node_modules/cypress-testrail-reporter/node_modules/axios/lib/adapters/http.js:202:11)
at IncomingMessage.emit (events.js:327:22)
at endReadableNT (internal/streams/readable.js:1327:12)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
{
config: {
adapter: [Function: httpAdapter],
transformRequest: { '0': [Function: transformRequest] },
transformResponse: { '0': [Function: transformResponse] },
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
validateStatus: [Function: validateStatus],
headers: {
Accept: 'application/json, text/plain, */*',
'Content-Type': 'application/json',
'User-Agent': 'axios/0.18.1',
'Content-Length': 76
},
method: 'post',
url: 'host/index.php?/api/v2/add_results_for_cases/undefined',
auth: { username: 'username', password: 'password' },
data: '{"results":[{"case_id":379,"status_id":1,"comment":"Execution time: 42ms"}]}'
},```
I am trying to do an axios GET call on my NativeScript-Vue application to an ASP.Net WebAPI backend.
On a VueJS web application, I am using the following code:
axios.get(url).then((response) => {
console.log(response)
}, (err) => {
console.log(err)
})
And the above code works fine. But as soon as I use it to my NativeScript Vue application, I am not getting anything.
The console.log shows the following:
status: null,
statusText: '',
headers: {},
config:
{ adapter: { [Function: xhrAdapter] [prototype]: [Object], [name]: 'xhrAdapter', [length]: 1 },
transformRequest: { '0': [Object] },
transformResponse: { '0': [Object] },
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
validateStatus: { [Function: validateStatus] [prototype]: [Object], [name]: 'validateStatus', [length]: 1 },
headers: { Accept: 'application/json, text/plain, */*' },
method: 'get',
url: 'THE_URL_HERE',
data: undefined },
request:
{ UNSENT: 0,
OPENED: 1,
HEADERS_RECEIVED: 2,
LOADING: 3,
DONE: 4,
_responseType: '',
textTypes:
[ 'text/plain',
'application/xml',
'application/rss+xml',
'text/html',
'text/xml',
[length]: 5 ],
_listeners: {},
_readyState: 4,
_options:
{ url: 'THE_URL_HERE',
method: 'GET',
headers: [Object] },
timeout: 0,
onreadystatechange: { [Function: handleLoad] [length]: 0, [name]: 'handleLoad', [prototype]: [Object] },
onerror: { [Function: handleError] [length]: 0, [name]: 'handleError', [prototype]: [Object] },
ontimeout: { [Function: handleTimeout] [length]: 0, [name]: 'handleTimeout', [prototype]: [Object] },
_errorFlag: true,
_response: null,
_responseTextReader: null,
_headers: null,
_status: null } }
Following the instructions posted on this article: Make Http Requests
I am able to get some data (pretty much I replaced my url in my sample code above to point to the URL in the article.
I did some investigation and I also found out that in the Chrome Debugging Tools, this is what's being returned by Make HTTP Requests article:
status: 200,
statusText: 'OK',
headers:
{ 'content-type': 'application/json',
'access-control-allow-origin': '*',
'set-cookie':
[ '__cfduid=d0755ff1a9e3a35137412056bfab86b221539838285; expires=Fri, 18-Oct-19 04:51:25 GMT; path=/; domain=.pokeapi.co; HttpOnly; Secure',
[length]: 1 ],
server: 'cloudflare',
'access-control-allow-methods': 'GET, OPTIONS',
'content-encoding': 'br',
'access-control-allow-headers': 'Authorization, Origin, X-Requested-With, Content-Type, Accept',
'expect-ct': 'max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"',
date: 'Thu, 18 Oct 2018 04:51:25 GMT',
'cf-ray': '46b863c5a8552a4f-SEA',
vary: 'Accept-Encoding',
'last-modified': 'Sat, 22 Sep 2018 23:55:29 GMT' },
config:
{ adapter: { [Function: xhrAdapter] [length]: 1, [name]: 'xhrAdapter', [prototype]: [Object] },
transformRequest: { '0': [Object] },
transformResponse: { '0': [Object] },
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
validateStatus: { [Function: validateStatus] [length]: 1, [name]: 'validateStatus', [prototype]: [Object] },
headers: { Accept: 'application/json, text/plain, */*' },
method: 'get',
url: 'https://pokeapi.co/api/v2/pokemon/?limit=151',
data: undefined },
request:
{ UNSENT: 0,
OPENED: 1,
HEADERS_RECEIVED: 2,
LOADING: 3,
DONE: 4,
_responseType: 'json',
textTypes:
[ 'text/plain',
'application/xml',
'application/rss+xml',
'text/html',
'text/xml',
[length]: 5 ],
_listeners: {},
_readyState: 4,
_options:
{ url: 'https://pokeapi.co/api/v2/pokemon/?limit=151',
method: 'GET',
headers: [Object] },
timeout: 0,
onreadystatechange: { [Function: handleLoad] [length]: 0, [name]: 'handleLoad', [prototype]: [Object] },
onerror: { [Function: handleError] [length]: 0, [name]: 'handleError', [prototype]: [Object] },
ontimeout: { [Function: handleTimeout] [length]: 0, [name]: 'handleTimeout', [prototype]: [Object] },
_errorFlag: false,
_response: { count: 949, next: null, previous: null, results: [Object] },
_responseTextReader:
{ [Function]
[arguments]: null,
[caller]: null,
[length]: 0,
[name]: '',
[prototype]: [Object] },
_headers:
{ 'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Set-Cookie': '__cfduid=d0755ff1a9e3a35137412056bfab86b221539838285; expires=Fri, 18-Oct-19 04:51:25 GMT; path=/; domain=.pokeapi.co; HttpOnly; Secure',
Server: 'cloudflare',
'access-control-allow-methods': 'GET, OPTIONS',
'Content-Encoding': 'br',
'access-control-allow-headers': 'Authorization, Origin, X-Requested-With, Content-Type, Accept',
'expect-ct': 'max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"',
Date: 'Thu, 18 Oct 2018 04:51:25 GMT',
'cf-ray': '46b863c5a8552a4f-SEA',
Vary: 'Accept-Encoding',
'Last-Modified': 'Sat, 22 Sep 2018 23:55:29 GMT' },
_status: 200 } }
I am already quite stuck on what to do next for this issue. Notice there are some difference on the console.log(response) using my URL, and the URL provided on the article.
I tried my API call in Postman and I am getting some data.
I also tried the Pokemon API call in Postman and getting some data as well. So not really sure which thing to investigate next.
UPDATE: For those asking the URL of my WebAPI, I have it here:
http://angeloaa-001-site1.itempurl.com/menucategory
You can try that link even in the browser (or postman) and you would see the data being returned as well.
Looking forward to some insights and responses,
One thing I notice is that your api does not return the Access-Control-Allow-Origin header in the response, it's just an empty object headers: {}
If you look at the response from the Make HTTP Requests article, it's includes the header 'access-control-allow-origin': '*'
And why do you need this header?
By default, browser implements the same origin policy which basically means that your browser will only allow your code to fetch data from the same origin. So if your api and your client is under different domains, you need to tell the browser to allow communication between the two. This is done by enabling CORS, cross origin request sharing, which basically is controlled by the Access-Control-Allow-Origin header in the api response.
To enable the cors in the api, follow this
I'm working on getting an AutoComplete widget to work. This code works:
var clients = [{ "ClientId": 123, "Name": "Steve" }, { "ClientId": 124, "Name": "Julie" }];
$("#client").kendoAutoComplete({
minLength: 1,
filter: "contains",
placeholder: "Type client name...",
dataTextField: "Name",
dataValueField: "ClientId",
template: kendo.template($("#template").html()),
dataSource: clients,
height: 370,
}).data("kendoAutoComplete");
However, when I try to use an actual remote dataSource, the browser displays a loading image but never shows the selected name. Here's the alternate data source:
var clients2 = new kendo.data.DataSource({
type: "jsonp",
transport: {
read: {
dataType: "jsonp",
url: "/api/clients"
}
}
});
Looking in Fiddler or Network tab in Chrome Dev Tools, the result of the api call is:
HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcVXNlcnNcU3RldmVcRG9jdW1lbnRzXEdpdEh1YlxkZGQtdmV0LXNhbXBsZVxGcm9udERlc2tTb2x1dGlvblxGcm9udERlc2suV2ViXGFwaVxjbGllbnRz?=
X-Powered-By: ASP.NET
Date: Thu, 05 Sep 2013 21:08:28 GMT
Content-Length: 141
[{"ClientId":"00000000-0000-0000-0000-000000000000","Name":"Steve Smith"},{"ClientId":"00000000-0000-0000-0000-000000000000","Name":"Julie"}]
So, what's the difference and why isn't it working? The data source is clearly being used, since I can see the network calls happen with each additional character I type into the textbox.
Thanks!
Thanks to #chris_a_wagner on twitter. The culprit was me specifying jsonp for the format instead of json (I forget why I originally had that). Switching to json works.