Create Widget: PostMan POST Call with Auth works. Fetch API Post call gets CORS error

  • 3 June 2021
  • 9 replies
  • 248 views

Badge +2

Hello!

 

I am able to provide my auth bearer token to a POST request containing the json to create a widget on my board via PostMan or the live test in the API Documentation. 

 

However, running a local server / react app to call the fetch api using the same url and http headers/credentials results in CORS error.

 

How am I to test the rest api for my app using the fetch api and running on localhost:XXXX?


9 replies

Userlevel 4
Badge +6

Hi @Addison Joseph,

 

You can take a look at this demo app that shows how to use REST APIs in a NodeJs backend.

Badge +2

I’m sorry there must be miscommunication. 

I create a POST request with the url:

https://api.miro.com/v1/boards/boardId/widgets

and a json body with widget information {...}

When I use PostMan, this is fine, it goes through, no issues and I can see that my board has been updated.

 

When i use my react application (not a miro app) that is being served through my localhost on any port, I cannot update my board, and I get a CORS error.

Userlevel 4
Badge +6

I shared the demo app so you can have a (local) working application to test the APIs and try to understand what is not done the same way in your react app.

 

From what you describe it seems that the error comes from the react app itself and not the API call. Could it be related to a configuration issue on the react side? Could you share the project here or some pieces of code so we can take a look and try to find what the issue.

Badge +2

So this is my fetch call in my react application. 

const options = {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: 'Bearer XXXXXX',
Connection: 'keep-alive',
Credentials: 'include',
'Sec-Fetch-Dest': 'empty',
'Sec-Fetch-Mode': 'cors',
'Sec-Fetch-Site': 'same-origin',
Origin: 'http://localhost:3000',
},
body: JSON.stringify({
type: 'card',
title: 'Simple card',
description: 'Desc',
}),
};

const url = https://api.miro.com/v1/boards/${process.env.REACT_APP_BOARD_ID}/widgets

await fetch(url, options).then((res) => {
console.log(res);
});

 

Badge +2

So I did some digging and I decided to use a proxy with ```setupProxy.js``` using ```http-proxy-middleware```

 

module.exports = function (app) {
app.use(
'/widgets',
createProxyMiddleware({
target: `https://api.miro.com/v1/boards/${process.env.REACT_APP_BOARD_ID}/widgets`,
changeOrigin: true,
logLevel: 'debug',
})
);
};

 

 

only thing that changes is my url from previous post 

 

const url = "/widgets';

 

 

with this request, I now get a new error message coming from the miro API. 

 

I have verified this is coming from your api and not being blocked by the browser, or from my server. 

I get a 405 Method Not Allowed.. if i take the same request from chrome network tab and ```copy curl```

open terminal and curl, the request goes through…

 

i suspect there is something in the header values that is missing or is not correct between my fetch api call and curl. 

 

Here is the request being sent out from the fetch call. 


IncomingMessage {
_readableState: ReadableState {
objectMode: false,
highWaterMark: 16384,
buffer: BufferList { head: [Object], tail: [Object], length: 1 },
length: 58,
pipes: [ [ClientRequest] ],
flowing: true,
ended: false,
endEmitted: false,
reading: false,
sync: true,
needReadable: false,
emittedReadable: false,
readableListening: false,
resumeScheduled: true,
errorEmitted: false,
emitClose: true,
autoDestroy: false,
destroyed: false,
errored: null,
closed: false,
closeEmitted: false,
defaultEncoding: 'utf8',
awaitDrainWriters: null,
multiAwaitDrain: false,
readingMore: true,
decoder: null,
encoding: null,
[Symbol(kPaused)]: false
},
_events: [Object: null prototype] {
end: [ [Function: clearRequestTimeout], [Function] ],
aborted: [Function (anonymous)],
error: [Function: proxyError],
data: [Function: ondata]
},
_eventsCount: 4,
_maxListeners: undefined,
socket: <ref *1> Socket {
connecting: false,
_hadError: false,
_parent: null,
_host: null,
_readableState: ReadableState {
objectMode: false,
highWaterMark: 16384,
buffer: BufferList { head: null, tail: null, length: 0 },
length: 0,
pipes: [],
flowing: true,
ended: false,
endEmitted: false,
reading: true,
sync: false,
needReadable: true,
emittedReadable: false,
readableListening: false,
resumeScheduled: false,
errorEmitted: false,
emitClose: false,
autoDestroy: false,
destroyed: false,
errored: null,
closed: false,
closeEmitted: false,
defaultEncoding: 'utf8',
awaitDrainWriters: null,
multiAwaitDrain: false,
readingMore: false,
decoder: null,
encoding: null,
[Symbol(kPaused)]: false
},
_events: [Object: null prototype] {
end: [Array],
timeout: [Function: socketOnTimeout],
data: [Function: bound socketOnData],
error: [Function: socketOnError],
close: [Array],
drain: [Function: bound socketOnDrain],
resume: [Function: onSocketResume],
pause: [Function: onSocketPause]
},
_eventsCount: 8,
_maxListeners: undefined,
_writableState: WritableState {
objectMode: false,
highWaterMark: 16384,
finalCalled: false,
needDrain: false,
ending: false,
ended: false,
finished: false,
destroyed: false,
decodeStrings: false,
defaultEncoding: 'utf8',
length: 0,
writing: false,
corked: 0,
sync: false,
bufferProcessing: false,
onwrite: [Function: bound onwrite],
writecb: null,
writelen: 0,
afterWriteTickInfo: null,
buffered: [],
bufferedIndex: 0,
allBuffers: true,
allNoop: true,
pendingcb: 0,
prefinished: false,
errorEmitted: false,
emitClose: false,
autoDestroy: false,
errored: null,
closed: false
},
allowHalfOpen: true,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
_events: [Object: null prototype],
_eventsCount: 5,
_maxListeners: undefined,
_connections: 3,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
allowHalfOpen: true,
pauseOnConnect: false,
httpAllowHalfOpen: false,
timeout: 0,
keepAliveTimeout: 5000,
maxHeadersCount: null,
headersTimeout: 60000,
requestTimeout: 0,
kill: [Function (anonymous)],
_connectionKey: '4:0.0.0.0:3000',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 30
},
_server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
_events: [Object: null prototype],
_eventsCount: 5,
_maxListeners: undefined,
_connections: 3,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
allowHalfOpen: true,
pauseOnConnect: false,
httpAllowHalfOpen: false,
timeout: 0,
keepAliveTimeout: 5000,
maxHeadersCount: null,
headersTimeout: 60000,
requestTimeout: 0,
kill: [Function (anonymous)],
_connectionKey: '4:0.0.0.0:3000',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 30
},
parser: HTTPParser {
'0': [Function: bound setRequestTimeout],
'1': [Function: parserOnHeaders],
'2': [Function: parserOnHeadersComplete],
'3': [Function: parserOnBody],
'4': [Function: parserOnMessageComplete],
'5': [Function: bound onParserExecute],
'6': [Function: bound onParserTimeout],
_headers: [],
_url: '',
socket: [Circular *1],
incoming: [Circular *2],
outgoing: null,
maxHeaderPairs: 2000,
_consumed: true,
onIncoming: [Function: bound parserOnIncoming],
[Symbol(resource_symbol)]: [HTTPServerAsyncResource]
},
on: [Function: socketListenerWrap],
addListener: [Function: socketListenerWrap],
prependListener: [Function: socketListenerWrap],
_paused: false,
_httpMessage: ServerResponse {
_events: [Object: null prototype],
_eventsCount: 1,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: false,
chunkedEncoding: false,
shouldKeepAlive: true,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: true,
sendDate: true,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: null,
_hasBody: true,
_trailer: '',
finished: false,
_headerSent: false,
socket: [Circular *1],
_header: null,
_keepAliveTimeout: 5000,
_onPendingData: [Function: bound updateOutgoingData],
_sent100: false,
_expect_continue: false,
req: [Circular *2],
locals: [Object: null prototype] {},
flush: [Function: flush],
write: [Function: write],
end: [Function: end],
on: [Function: on],
writeHead: [Function: writeHead],
[Symbol(kCapture)]: false,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype]
},
timeout: 0,
[Symbol(async_id_symbol)]: 43,
[Symbol(kHandle)]: TCP {
reading: true,
onconnection: null,
_consumed: true,
[Symbol(owner_symbol)]: [Circular *1]
},
[Symbol(kSetNoDelay)]: false,
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: Timeout {
_idleTimeout: -1,
_idlePrev: null,
_idleNext: null,
_idleStart: 42834,
_onTimeout: null,
_timerArgs: undefined,
_repeat: null,
_destroyed: true,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 3905824,
[Symbol(triggerId)]: 3905821
},
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(kCapture)]: false,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0,
[Symbol(RequestTimeout)]: undefined
},
httpVersionMajor: 1,
httpVersionMinor: 1,
httpVersion: '1.1',
complete: false,
headers: {
host: 'localhost:3000',
connection: 'keep-alive',
'content-length': '58',
'sec-ch-ua': '" Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"',
accept: 'application/json',
authorization: 'Bearer XXXXXX',
'sec-ch-ua-mobile': '?0',
'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36',
'content-type': 'application/json',
origin: 'http://localhost:3000',
'sec-fetch-site': 'same-origin',
'sec-fetch-mode': 'cors',
'sec-fetch-dest': 'empty',
referer: 'http://localhost:3000/',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'en-US,en;q=0.9',
cookie: '_ga=GA1.1.1311586413.1621612848; ab.storage.userId.7af503ae-0c84-478f-98b0-ecfff5d67750=%7B%22g%22%3A%221266559%22%2C%22c%22%3A1621612848040%2C%22l%22%3A1621612848040%7D; ab.storage.deviceId.7af503ae-0c84-478f-98b0-ecfff5d67750=%7B%22g%22%3A%2271597f60-6296-3d89-1e85-021a7f732e06%22%2C%22c%22%3A1621612848042%2C%22l%22%3A1621612848042%7D; _gid=GA1.1.1604970988.1623068083; access=eyJraWQiOiJERHg5dHVpWEpKcVhIekNfWG53dlVoSWdvZUxWR3laRHd3OUdkSVNQdUtVIiwiYWxnIjoiUlMyNTYifQ.eyJ2ZXIiOjEsImp0aSI6IkFULmRlblQydV9Ed0tHdm51VEpkOTJMMlI0WDRKd1JqSFlRbmVaYW1FaW5DWTgub2FyOTQ1dGtzR0I2WGw1Nkc0eDYiLCJpc3MiOiJodHRwczovL2Rldi04MDQ0NTkub2t0YS5jb20vb2F1dGgyL2RlZmF1bHQiLCJhdWQiOiJhcGk6Ly9kZWZhdWx0IiwiaWF0IjoxNjIzMDczMDUyLCJleHAiOjE2MjMwNzY2NTIsImNpZCI6IjBvYTE1MWVvazM2WkU1M21YNHg2IiwidWlkIjoiMDB1b2Vib202dmg0YU9mSUs0eDYiLCJzY3AiOlsib2ZmbGluZV9hY2Nlc3MiLCJlbWFpbCIsIm9wZW5pZCIsInByb2ZpbGUiXSwic3ViIjoidWxoYXEuYWRkaXNvbkBiY2cuY29tIn0.MXrfmEDv_whbG_fs0CxRQaEJivBtNa7tNt6tqHE9v3zGPBpY18l9VaeTh7Fx30B8eeGDnfIyTfy2X7K1oLJ_lHHSz0Gncs8kGr0jxjCv3Pff4S9UNIefHCWEJuN5xTd9heFj70RGznBIUZ4xjvTkUi9_0p0c95j7Ns7KcMhJ77RTb5AWhegK4mipMKwTO_msjL5a0hU14scj6pcN6waQFqPI3zrTfIX3omhpauMEskTY9tXkBa_2TuB-XqZMc5d5l_p-n0hq-ViXgyo5_L-Sd0KgoDIP2FPPGLzc4mbywjOvrhMDSgRRukJojV5IneY9gkEA-4zp2DbuNIzYt_cS6Q; logout=https%3A%2F%2Fdev-804459.okta.com%2Foauth2%2Fdefault%2Fv1%2Flogout%3Fid_token_hint%3DeyJraWQiOiJERHg5dHVpWEpKcVhIekNfWG53dlVoSWdvZUxWR3laRHd3OUdkSVNQdUtVIiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIwMHVvZWJvbTZ2aDRhT2ZJSzR4NiIsIm5hbWUiOiJBZGRpc29uMiBVbGhhcTIiLCJlbWFpbCI6InVsaGFxLmFkZGlzb25AYmNnLmNvbSIsInZlciI6MSwiaXNzIjoiaHR0cHM6Ly9kZXYtODA0NDU5Lm9rdGEuY29tL29hdXRoMi9kZWZhdWx0IiwiYXVkIjoiMG9hMTUxZW9rMzZaRTUzbVg0eDYiLCJpYXQiOjE2MjMwNzMwNTIsImV4cCI6MTYyMzA3NjY1MiwianRpIjoiSUQueDh5RDdQRTVaZ2ZsbExJQmZOVkhJTHpPUEoxZWE3Y29TdTB6a0ZrN2RqVSIsImFtciI6WyJwd2QiXSwiaWRwIjoiMDBvMTR4bXA5VUhzQkoxU040eDYiLCJwcmVmZXJyZWRfdXNlcm5hbWUiOiJ1bGhhcS5hZGRpc29uQGJjZy5jb20iLCJhdXRoX3RpbWUiOjE2MjMwNjgxNjgsImF0X2hhc2giOiJodmZyNWFKZ1o5YU1ubjhxLTZ5WUtBIn0.GhGL_NfvfT4RClddlBI0OaOPsU-XyohNRgQtG8zW7SjQspaxgtv0EgHqdolzuoW2-5faEdIvWslBZ6ol5KJveMwOVxgFOHW_3EiO3nUEJQF4fG6wgsraVMM5A2sBo6u-KHKS7Ui6_k3B-LF48N-95NAE8VUFaR7mcYijn4ocouRFCEaO-FRt8n0YIdhpdvx8YrS2bcn2VwaM4EZl-dUe11cnXmFHpK_OMIj9uDPwfhQiHXMX7W3lVmDGgu7f3ZEqD5qUMTpoJ_ojmcCvWUylKJ9Dz6B2KqEL9x0h0a27SAcp7ZdqaChUOyayh4J_Z46Wqf86Cfbwt-2IZgnzCqkpDA%26post_logout_redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A3000%252F%26state%3Dredirect%3A%252Flogout; _gat=1; ab.storage.sessionId.7af503ae-0c84-478f-98b0-ecfff5d67750=%7B%22g%22%3A%22c57dc1a4-cd93-aa28-6069-dcd15d94a5e0%22%2C%22e%22%3A1623076375126%2C%22c%22%3A1623073017632%2C%22l%22%3A1623074575126%7D'
},
rawHeaders: [
'Host',
'localhost:3000',
'Connection',
'keep-alive',
'Content-Length',
'58',
'sec-ch-ua',
'" Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"',
'Accept',
'application/json',
'Authorization',
'Bearer XXXXXX',
'sec-ch-ua-mobile',
'?0',
'User-Agent',
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36',
'Content-Type',
'application/json',
'Origin',
'http://localhost:3000',
'Sec-Fetch-Site',
'same-origin',
'Sec-Fetch-Mode',
'cors',
'Sec-Fetch-Dest',
'empty',
'Referer',
'http://localhost:3000/',
'Accept-Encoding',
'gzip, deflate, br',
'Accept-Language',
'en-US,en;q=0.9',
'Cookie',
'_ga=GA1.1.1311586413.1621612848; ab.storage.userId.7af503ae-0c84-478f-98b0-ecfff5d67750=%7B%22g%22%3A%221266559%22%2C%22c%22%3A1621612848040%2C%22l%22%3A1621612848040%7D; ab.storage.deviceId.7af503ae-0c84-478f-98b0-ecfff5d67750=%7B%22g%22%3A%2271597f60-6296-3d89-1e85-021a7f732e06%22%2C%22c%22%3A1621612848042%2C%22l%22%3A1621612848042%7D; _gid=GA1.1.1604970988.1623068083; access=eyJraWQiOiJERHg5dHVpWEpKcVhIekNfWG53dlVoSWdvZUxWR3laRHd3OUdkSVNQdUtVIiwiYWxnIjoiUlMyNTYifQ.eyJ2ZXIiOjEsImp0aSI6IkFULmRlblQydV9Ed0tHdm51VEpkOTJMMlI0WDRKd1JqSFlRbmVaYW1FaW5DWTgub2FyOTQ1dGtzR0I2WGw1Nkc0eDYiLCJpc3MiOiJodHRwczovL2Rldi04MDQ0NTkub2t0YS5jb20vb2F1dGgyL2RlZmF1bHQiLCJhdWQiOiJhcGk6Ly9kZWZhdWx0IiwiaWF0IjoxNjIzMDczMDUyLCJleHAiOjE2MjMwNzY2NTIsImNpZCI6IjBvYTE1MWVvazM2WkU1M21YNHg2IiwidWlkIjoiMDB1b2Vib202dmg0YU9mSUs0eDYiLCJzY3AiOlsib2ZmbGluZV9hY2Nlc3MiLCJlbWFpbCIsIm9wZW5pZCIsInByb2ZpbGUiXSwic3ViIjoidWxoYXEuYWRkaXNvbkBiY2cuY29tIn0.MXrfmEDv_whbG_fs0CxRQaEJivBtNa7tNt6tqHE9v3zGPBpY18l9VaeTh7Fx30B8eeGDnfIyTfy2X7K1oLJ_lHHSz0Gncs8kGr0jxjCv3Pff4S9UNIefHCWEJuN5xTd9heFj70RGznBIUZ4xjvTkUi9_0p0c95j7Ns7KcMhJ77RTb5AWhegK4mipMKwTO_msjL5a0hU14scj6pcN6waQFqPI3zrTfIX3omhpauMEskTY9tXkBa_2TuB-XqZMc5d5l_p-n0hq-ViXgyo5_L-Sd0KgoDIP2FPPGLzc4mbywjOvrhMDSgRRukJojV5IneY9gkEA-4zp2DbuNIzYt_cS6Q; logout=https%3A%2F%2Fdev-804459.okta.com%2Foauth2%2Fdefault%2Fv1%2Flogout%3Fid_token_hint%3DeyJraWQiOiJERHg5dHVpWEpKcVhIekNfWG53dlVoSWdvZUxWR3laRHd3OUdkSVNQdUtVIiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIwMHVvZWJvbTZ2aDRhT2ZJSzR4NiIsIm5hbWUiOiJBZGRpc29uMiBVbGhhcTIiLCJlbWFpbCI6InVsaGFxLmFkZGlzb25AYmNnLmNvbSIsInZlciI6MSwiaXNzIjoiaHR0cHM6Ly9kZXYtODA0NDU5Lm9rdGEuY29tL29hdXRoMi9kZWZhdWx0IiwiYXVkIjoiMG9hMTUxZW9rMzZaRTUzbVg0eDYiLCJpYXQiOjE2MjMwNzMwNTIsImV4cCI6MTYyMzA3NjY1MiwianRpIjoiSUQueDh5RDdQRTVaZ2ZsbExJQmZOVkhJTHpPUEoxZWE3Y29TdTB6a0ZrN2RqVSIsImFtciI6WyJwd2QiXSwiaWRwIjoiMDBvMTR4bXA5VUhzQkoxU040eDYiLCJwcmVmZXJyZWRfdXNlcm5hbWUiOiJ1bGhhcS5hZGRpc29uQGJjZy5jb20iLCJhdXRoX3RpbWUiOjE2MjMwNjgxNjgsImF0X2hhc2giOiJodmZyNWFKZ1o5YU1ubjhxLTZ5WUtBIn0.GhGL_NfvfT4RClddlBI0OaOPsU-XyohNRgQtG8zW7SjQspaxgtv0EgHqdolzuoW2-5faEdIvWslBZ6ol5KJveMwOVxgFOHW_3EiO3nUEJQF4fG6wgsraVMM5A2sBo6u-KHKS7Ui6_k3B-LF48N-95NAE8VUFaR7mcYijn4ocouRFCEaO-FRt8n0YIdhpdvx8YrS2bcn2VwaM4EZl-dUe11cnXmFHpK_OMIj9uDPwfhQiHXMX7W3lVmDGgu7f3ZEqD5qUMTpoJ_ojmcCvWUylKJ9Dz6B2KqEL9x0h0a27SAcp7ZdqaChUOyayh4J_Z46Wqf86Cfbwt-2IZgnzCqkpDA%26post_logout_redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A3000%252F%26state%3Dredirect%3A%252Flogout; _gat=1; ab.storage.sessionId.7af503ae-0c84-478f-98b0-ecfff5d67750=%7B%22g%22%3A%22c57dc1a4-cd93-aa28-6069-dcd15d94a5e0%22%2C%22e%22%3A1623076375126%2C%22c%22%3A1623073017632%2C%22l%22%3A1623074575126%7D'
],
trailers: {},
rawTrailers: [],
aborted: false,
upgrade: false,
url: '/widgets',
method: 'POST',
statusCode: null,
statusMessage: null,
client: <ref *1> Socket {
connecting: false,
_hadError: false,
_parent: null,
_host: null,
_readableState: ReadableState {
objectMode: false,
highWaterMark: 16384,
buffer: BufferList { head: null, tail: null, length: 0 },
length: 0,
pipes: [],
flowing: true,
ended: false,
endEmitted: false,
reading: true,
sync: false,
needReadable: true,
emittedReadable: false,
readableListening: false,
resumeScheduled: false,
errorEmitted: false,
emitClose: false,
autoDestroy: false,
destroyed: false,
errored: null,
closed: false,
closeEmitted: false,
defaultEncoding: 'utf8',
awaitDrainWriters: null,
multiAwaitDrain: false,
readingMore: false,
decoder: null,
encoding: null,
[Symbol(kPaused)]: false
},
_events: [Object: null prototype] {
end: [Array],
timeout: [Function: socketOnTimeout],
data: [Function: bound socketOnData],
error: [Function: socketOnError],
close: [Array],
drain: [Function: bound socketOnDrain],
resume: [Function: onSocketResume],
pause: [Function: onSocketPause]
},
_eventsCount: 8,
_maxListeners: undefined,
_writableState: WritableState {
objectMode: false,
highWaterMark: 16384,
finalCalled: false,
needDrain: false,
ending: false,
ended: false,
finished: false,
destroyed: false,
decodeStrings: false,
defaultEncoding: 'utf8',
length: 0,
writing: false,
corked: 0,
sync: false,
bufferProcessing: false,
onwrite: [Function: bound onwrite],
writecb: null,
writelen: 0,
afterWriteTickInfo: null,
buffered: [],
bufferedIndex: 0,
allBuffers: true,
allNoop: true,
pendingcb: 0,
prefinished: false,
errorEmitted: false,
emitClose: false,
autoDestroy: false,
errored: null,
closed: false
},
allowHalfOpen: true,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
_events: [Object: null prototype],
_eventsCount: 5,
_maxListeners: undefined,
_connections: 3,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
allowHalfOpen: true,
pauseOnConnect: false,
httpAllowHalfOpen: false,
timeout: 0,
keepAliveTimeout: 5000,
maxHeadersCount: null,
headersTimeout: 60000,
requestTimeout: 0,
kill: [Function (anonymous)],
_connectionKey: '4:0.0.0.0:3000',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 30
},
_server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
_events: [Object: null prototype],
_eventsCount: 5,
_maxListeners: undefined,
_connections: 3,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
allowHalfOpen: true,
pauseOnConnect: false,
httpAllowHalfOpen: false,
timeout: 0,
keepAliveTimeout: 5000,
maxHeadersCount: null,
headersTimeout: 60000,
requestTimeout: 0,
kill: [Function (anonymous)],
_connectionKey: '4:0.0.0.0:3000',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 30
},
parser: HTTPParser {
'0': [Function: bound setRequestTimeout],
'1': [Function: parserOnHeaders],
'2': [Function: parserOnHeadersComplete],
'3': [Function: parserOnBody],
'4': [Function: parserOnMessageComplete],
'5': [Function: bound onParserExecute],
'6': [Function: bound onParserTimeout],
_headers: [],
_url: '',
socket: [Circular *1],
incoming: [Circular *2],
outgoing: null,
maxHeaderPairs: 2000,
_consumed: true,
onIncoming: [Function: bound parserOnIncoming],
[Symbol(resource_symbol)]: [HTTPServerAsyncResource]
},
on: [Function: socketListenerWrap],
addListener: [Function: socketListenerWrap],
prependListener: [Function: socketListenerWrap],
_paused: false,
_httpMessage: ServerResponse {
_events: [Object: null prototype],
_eventsCount: 1,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: false,
chunkedEncoding: false,
shouldKeepAlive: true,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: true,
sendDate: true,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: null,
_hasBody: true,
_trailer: '',
finished: false,
_headerSent: false,
socket: [Circular *1],
_header: null,
_keepAliveTimeout: 5000,
_onPendingData: [Function: bound updateOutgoingData],
_sent100: false,
_expect_continue: false,
req: [Circular *2],
locals: [Object: null prototype] {},
flush: [Function: flush],
write: [Function: write],
end: [Function: end],
on: [Function: on],
writeHead: [Function: writeHead],
[Symbol(kCapture)]: false,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype]
},
timeout: 0,
[Symbol(async_id_symbol)]: 43,
[Symbol(kHandle)]: TCP {
reading: true,
onconnection: null,
_consumed: true,
[Symbol(owner_symbol)]: [Circular *1]
},
[Symbol(kSetNoDelay)]: false,
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: Timeout {
_idleTimeout: -1,
_idlePrev: null,
_idleNext: null,
_idleStart: 42834,
_onTimeout: null,
_timerArgs: undefined,
_repeat: null,
_destroyed: true,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 3905824,
[Symbol(triggerId)]: 3905821
},
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(kCapture)]: false,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0,
[Symbol(RequestTimeout)]: undefined
},
_consuming: false,
_dumped: false,
next: [Function: next],
baseUrl: '/widgets',
originalUrl: '/widgets',
_parsedUrl: Url {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: null,
query: null,
pathname: '/widgets',
path: '/widgets',
href: '/widgets',
_raw: '/widgets'
},
params: {},
query: {},
res: <ref *3> ServerResponse {
_events: [Object: null prototype] { finish: [Function: bound resOnFinish] },
_eventsCount: 1,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: false,
chunkedEncoding: false,
shouldKeepAlive: true,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: true,
sendDate: true,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: null,
_hasBody: true,
_trailer: '',
finished: false,
_headerSent: false,
socket: <ref *1> Socket {
connecting: false,
_hadError: false,
_parent: null,
_host: null,
_readableState: [ReadableState],
_events: [Object: null prototype],
_eventsCount: 8,
_maxListeners: undefined,
_writableState: [WritableState],
allowHalfOpen: true,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: [Server],
_server: [Server],
parser: [HTTPParser],
on: [Function: socketListenerWrap],
addListener: [Function: socketListenerWrap],
prependListener: [Function: socketListenerWrap],
_paused: false,
_httpMessage: [Circular *3],
timeout: 0,
[Symbol(async_id_symbol)]: 43,
[Symbol(kHandle)]: [TCP],
[Symbol(kSetNoDelay)]: false,
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: Timeout {
_idleTimeout: -1,
_idlePrev: null,
_idleNext: null,
_idleStart: 42834,
_onTimeout: null,
_timerArgs: undefined,
_repeat: null,
_destroyed: true,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 3905824,
[Symbol(triggerId)]: 3905821
},
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(kCapture)]: false,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0,
[Symbol(RequestTimeout)]: undefined
},
_header: null,
_keepAliveTimeout: 5000,
_onPendingData: [Function: bound updateOutgoingData],
_sent100: false,
_expect_continue: false,
req: [Circular *2],
locals: [Object: null prototype] {},
flush: [Function: flush],
write: [Function: write],
end: [Function: end],
on: [Function: on],
writeHead: [Function: writeHead],
[Symbol(kCapture)]: false,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype] { 'x-powered-by': [Array] }
},
route: Route {
path: '*',
stack: [
[Layer], [Layer], [Layer], [Layer],
[Layer], [Layer], [Layer], [Layer],
[Layer], [Layer], [Layer], [Layer],
[Layer], [Layer], [Layer], [Layer],
[Layer], [Layer], [Layer], [Layer],
[Layer], [Layer], [Layer], [Layer],
[Layer], [Layer], [Layer], [Layer],
[Layer], [Layer], [Layer], [Layer],
[Layer], [Layer], [Layer]
],
methods: {
acl: true,
bind: true,
checkout: true,
connect: true,
copy: true,
delete: true,
get: true,
head: true,
link: true,
lock: true,
'm-search': true,
merge: true,
mkactivity: true,
mkcalendar: true,
mkcol: true,
move: true,
notify: true,
options: true,
patch: true,
post: true,
pri: true,
propfind: true,
proppatch: true,
purge: true,
put: true,
rebind: true,
report: true,
search: true,
source: true,
subscribe: true,
trace: true,
unbind: true,
unlink: true,
unlock: true,
unsubscribe: true
}
},
[Symbol(kCapture)]: false,
[Symbol(RequestTimeout)]: undefined
}

 

Userlevel 2
Badge +6

If you get a CORS error it is 100% on your side. The server pretty much rejected your request because the host, be it local or a server doesn’t have matching / needed protocols to establish connection. Had the same issue when I was trying to send requests from my server, just needed to tweak CORS policies and add some security protocols to the server and everything worked out fine.

 

In terms of headers I only use the auth token and and content-type and get through everytime, so I don’t think you’re missing anything there.

 

Would really recommend looking into CORS and adjusting the permissions wherever aplicable.

Badge +2

As of now, it is no longer a CORS issues, it looks like the method is not allowed a 405… but i’m not sure why. 

Userlevel 2
Badge +6

As of now, it is no longer a CORS issues, it looks like the method is not allowed a 405… but i’m not sure why. 

From the code you shown, I cannot really see any mistake. But if you can access the board, and get a response or even create a widget as you mentioned via postman, it has to be something at your end in terms of accessing the connection, that is my best guess. 

 

I do not work with react so cannot really say anything about the enviroment. But most likely if you get connection 4XX’s errors or CORS errors it is a protocol / permission issue from host to server, maybe the MIro support can help you further.

Badge +2

OK just to be clear, I was calling the rest api from client code housed in browser, which is what is causing CORS issues since the browser is involved. 

So to avoid a CORS issue from browser, I’ve migrated my rest api calls to server only. My front-end makes a call to my back-end. Back-end calls miro api and returns information. 

 

Reply