I' am traying to fech jenkins from NextJS proyect and all the time i get this error in the console:
fetch('http://server:8080/job/test/build',
{
mode: "cors",
method: "POST",
headers: {
"Authorization": "Basic <my_token>"
}
});
I tryed enable 'no-cros' and 'cros', install CORS module in my jenkins and nothing...
Related
I am trying to get my Express backend to set a site-wide cookie on my NextJS frontend, each of which is running on separate virtual machines. The relevant backend and frontend configurations are:
In the frontend, I initate the following HTTP request:
fetch('http://192.168.1.<Express virtual machine>:3000/service', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({...}),
credentials: 'include'
}).then(res => res.json()).then(data => {console.log(data)});
In the backend, the following Express application is running with a global CORS middleware configured:
app.use(cors({origin: 'http://192.168.1.<Frontend virtual machine>:3000', credentials: true}));
app.post('/service', (req, res) => {
res.cookie('token', token, {
secure: false,
httpOnly: false,
sameSite: 'none'
});
res.json({...});
});
Upon initiating the HTTP request to /service, the Cookies section of my frontend application in the Storage (Firefox) or Application (Chrome) tab shows that there are no cookies set. However, in the network tab, the Cookies tab on my HTTP request shows that there is both a response cookie and a request cookie. The response cookie has path property set to '/' suggesting that it should have been set site-wide.
I am trying to run a pre-request script for authenticating all my requests to the Spotify API. It works via the Postman GUI, but when I try to make the request via scripting, it fails because there is no body. Here is my code
const postRequest = {
url: pm.environment.get("spotifyAuthApi"),
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded",
"Accept": "*/*",
"Content-Length": 29,
"Authorization": "Basic " + btoa(pm.environment.get("client_id") + pm.environment.get("client_secret"))
},
body: {
grant_type: "client_credentials",
}
}
I get a
error: "unsupported_grant_type"
error_description: "grant_type parameter is missing"
And when I examine the request via the postman console, there is no request body, even though the request was built exactly like my fetch token request that does the same thing successfully in postman, only via the GUI instead of via a pre-request script. I have searched far and wide about this issue and tried multiple variations of the body object but to no avail. Either the body object doesn't generate my desired field, or it doesn't get created at all.
Mode might be missing in the body object. Try this:
body: {
mode: 'raw',
raw: JSON.stringify({ grant_type: 'client_credentials' })
}
More details might be found in Postman docs for RequestBody.
If you're using urlencoded, the body of the request would be structured like this:
body: {
mode: 'urlencoded',
urlencoded: [
{ key: 'grant_type', value: 'client_credentials'}
]
}
I have a user authentication server setup using Express and Node.js in my localhost Port 3333 and I am trying to connect to the endpoint in Next.js port 3000 using isomorphic-unfetch for the fetch. I am getting a CORS 401 error, I have done a fair bit of research already but just wanted to know whether it was possible connecting to a Express server on localhosts? I have tried adding "Access-Control-Allow-Origin": "*", "Content-Type": "multipart/form-data" to a header object. The express server has cors setup already.
This function below is called on click of a button.
onLoginClick = async () => {
let header = new Headers({
"Access-Control-Allow-Origin": "*",
"Content-Type": "multipart/form-data"
});
const res = await fetch("http://localhost:3333", {
method: "POST",
header,
body: JSON.stringify({
username: "USER",
password: "PASSWORD"
})
});
}
Error message -
http://localhost:3333/ 401 (Unauthorized)
Response {type: "cors", url: "http://localhost:3333/", redirected: false, status: 401, ok: false, …}
First of all, CORS is configured on the server side. You configure your server to allow calls from specific origins.
In your code, onLoginClick is a client-side code, it runs on the browser, client cannot decide which origin the server should allowed to, that would defeat the purpose of having CORS.
Usually you don't need to change the cors configuration in a Next.js app, because you would be calling the API from the same origin that hosted the client side app.
By default, Next.js only support same-origin for API Routes, if you need to customize it, you can use micro-cors.
I started learning Vuejs and I saw a strange behavior with the HTTP request to my web server. I'm using axios to make requests.
I just installed the vue-cli version 3.11 without using the webpack, and I added the config file vue.config.js next to package.json with the following content to proxy my web server
module.exports = {
devServer: {
port: 8081,
proxy: "http://127.0.0.1:8080"
}
};
Then using axios I'm trying to do a GET request by clicking a button
axios.get(API_URL, {
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"Cache-Control": "no-cache"
}
}).then(response => {});
My web server based on Python and bottle where the API request of fetching users takes between 5ms and 16ms to be processed.
By opening the browser inspector I saw that on the second request I'm getting an overhead around 300ms, please see below:
Request and Response parameters
Anyone has an opinion about this behavior? I searched a bit for vue-cli 3 issues or CORS headers but I did not find anything helpful. Thank you.
I am trying to make an HTTP requeset to an external API using the following request:
let headers = new Headers({
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded',
'Access-Control-Allow-Origin': "*"
});
let options = new RequestOptions({ headers: headers });
let body = JSON.stringify({
test: test
comments: "test"
});
this.http.post("EXTERNAL_API_URL", body, options)
.map(res => res.json())
.subscribe((data) => {
console.log(data);
});
When I am making the API call from Chrome Postman plugin, the API works without any problem.
When I'm trying to make this call from my angular 2 app, the call is not working and returns the following error:
XMLHttpRequest cannot load MY_API_URL. 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:4200' is therefore not allowed access.
I know that I can access bypass it using the no web-security chrome:
Chrome.exe --disable-web-security
But I wish to make it work without it...
I also tried to add Header set Access-Control-Allow-Origin "*" in my http.conf as described here.
Any ideas?