Header field in Postman:
--header 'Dropbox-API-Arg: {"path": "/テスト自動化/test.xlsx"}'
And next to this field has an warning:
value contains non iso 8859 1 characters
I got error response when sending request:
Could not send request
Error: Invalid character in header content ["Dropbox-API-Arg"]
Could someone have any idea to fix it?
Try selecting the text in Postman and right clicking, then select EncodeURIComponent in the context menu
Related
I created an API endpoint using Google Cloud Functions and am trying to call it from a JS fetch function.
I am running into errors that I am pretty sure are related to either CORS or the output format, but I'm not really sure what is going on. A few other SO questions are similar, and helped me realize I needed to remove the mode: "no-cors". Most mention enabling CORS on the BE, so I added response.headers.set('Access-Control-Allow-Origin', '*') - which I learned of in this article - to ensure CORS would be enabled... But I still get the "Failed to fetch" error.
The Full Errors (reproducible in the live demo linked below) are:
Uncaught Error: Cannot add node 1 because a node with that id is
already in the Store. (This one is probably unrelated?)
Access to fetch at
'https://us-central1-stargazr-ncc-2893.cloudfunctions.net/nearest_csc?lat=37.75&lon=-122.5'
from origin 'https://o2gxx.csb.app' has been blocked by CORS policy:
Request header field access-control-allow-origin is not allowed by
Access-Control-Allow-Headers in preflight response.
GET
https://us-central1-stargazr-ncc-2893.cloudfunctions.net/nearest_csc?lat=37.75&lon=-122.5 net::ERR_FAILED
Uncaught (in promise) TypeError: Failed to fetch
See Code Snippets below, please note where I used <---- *** Message *** to denote parts of the code that have recently changed, giving me one of those two errors.
Front End Code:
function getCSC() {
let lat = 37.75;
let lng = -122.5;
fetch(
`https://us-central1-stargazr-ncc-2893.cloudfunctions.net/nearest_csc?lat=${lat}&lon=${lng}`,
{
method: "GET",
// mode: "no-cors", <---- **Uncommenting this predictably gets rid of CORS error but returns a Opaque object which seems to have no data**
headers: {
// Accept: "application/json", <---- **Originally BE returned stringified json. Not sure if I should be returning it as something else or if this is still needed**
Origin: "https://lget3.csb.app",
"Access-Control-Allow-Origin": "*"
}
}
)
.then(response => {
console.log(response);
console.log(response.json());
});
}
Back End Code:
import json
import math
import os
import flask
def nearest_csc(request):
"""
args: request object w/ args for lat/lon
returns: String, either with json representation of nearest site information or an error message
"""
lat = request.args.get('lat', type = float)
lon = request.args.get('lon', type = float)
# Get list of all csc site locations
with open(file_path, 'r') as f:
data = json.load(f)
nearby_csc = []
# Removed from snippet for clarity:
# populate nearby_csc (list) with sites (dictionaries) as elems
# Determine which site is the closest, assigned to var 'closest_site'
# Grab site url and return site data if within 100 km
if dist_km < 100:
closest_site['dist_km'] = dist_km
// return json.dumps(closest_site) <--- **Original return statement. Added 4 lines below in an attempt to get CORS set up, but did not seem to work**
response = flask.jsonify(closest_site)
response.headers.set('Access-Control-Allow-Origin', '*')
response.headers.set('Access-Control-Allow-Methods', 'GET, POST')
return response
return "No sites found within 100 km"
Fuller context for code snippets above:
Here is a Code Sandbox Demo of the above.
Here is the full BE code on GitHub, minus the most recent attempt at adding CORS.
The API endpoint.
I'm also wondering if it's possible that CodeSandbox does CORS in a weird way, but have had the same issue running it on localhost:3000, and of course in prod would have this on my own personal domain.
The Error would appear to be CORS-related ( 'https://o2gxx.csb.app' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.) but I thought adding response.headers.set('Access-Control-Allow-Origin', '*') would solve that. Do I need to change something else on the BE? On the FE?
TLDR;
I am getting the Errors "Failed to fetch" and "field access-control-allow-origin is not allowed by Access-Control-Allow-Headers" even after attempts to enable CORS on backend and add headers to FE. See the links above for live demo of code.
Drop the part of your frontend code that adds a Access-Control-Allow-Origin header.
Never add Access-Control-Allow-Origin as a request header in your frontend code.
The only effect that’ll ever have is a negative one: it’ll cause browsers to do CORS preflight OPTIONS requests even in cases when the actual (GET, POST, etc.) request from your frontend code would otherwise not trigger a preflight. And then the preflight will fail with this message:
Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response
…that is, it’ll fail with that unless the server the request is being made to has been configured to send an Access-Control-Allow-Headers: Access-Control-Allow-Origin response header.
But you never want Access-Control-Allow-Origin in the Access-Control-Allow-Headers response-header value. If that ends up making things work, you’re actually just fixing the wrong problem. Because the real fix is: never set Access-Control-Allow-Origin as a request header.
Intuitively, it may seem logical to look at it as “I’ve set Access-Control-Allow-Origin both in the request and in the response, so that should be better than just having it in the response” — but it’s actually worse than only setting it in the response (for the reasons described above).
So the bottom line: Access-Control-Allow-Origin is solely a response header, not a request header. You only ever want to set it in server-side response code, not frontend JavaScript code.
The code in the question was also trying to add an Origin header. You also never want to try to set that header in your frontend JavaScript code.
Unlike the case with the Access-Control-Allow-Origin header, Origin is actually a request header — but it’s a special header that’s controlled completely by browsers, and browsers won’t ever allow your frontend JavaScript code to set it. So don’t ever try to.
Putting mongo connection string in studio3T first gave an error that url must be encoded. My username and password had colon and string had other special characters, so I did the Url encoding
But now after pasting the Url encoded string it keeps giving error unable to verify the text records.
Please help
I hosted osrm v5.24.0 on my local machine using a dataset preprocessed with CH (Contraction Hierarchies) pipeline. And I need to get the output of route response in flatbuffers format. But I couldn't find the correct query for that.
API Documentation reference: http://project-osrm.org/docs/v5.24.0/api/#requests
osrm request
Query I am using (Postman):
/route/v1/driving/73.14568712144677,-0.6875788801118562;73.13504135080412,-0.682499947378062?overview=full&alternatives=false&steps=false&geometries=geojson&format=flatbuffers
Result I get:
{
"message": "Query string malformed close to position 156",
"code": "InvalidQuery"
}
This is resolved. Following is the correct get request to get the response in flatbuffers format.
Get Request:
/route/v1/driving/73.14568712144677,-0.6875788801118562;73.13504135080412,-0.682499947378062.flatbuffers?overview=full&alternatives=false&steps=false&geometries=geojson
I'm trying to use the react-pdf library to display a base64 encoded PDF file. The B64 data is accurate, as it loads in an iframe as such:
<iframe
className={css.previewIframe}
src={`data:application/pdf;base64,${
this.props.encodedPdf
}`}
/>
However, if I insert the data into a react-pdf document as such, I get an error:
<Document file={this.props.encodedPdf} />
The Document is rendered with an error message Failed to load PDF file., and the console logs the following error: InvalidPDFException {name: "InvalidPDFException", message: "Invalid PDF structure"}
I also get a lot of warnings like the following: Warning: Ignoring invalid character "109" in hex string
The documentation clearly states that the file prop can be B64 encoded content. Any idea on what the issue could be? Here is the B64 data if needed:
JVBERi0xLjMKMSAwIG9iago8PAovS2lkcyBbIDMgMCBSIF0KL1R5cGUgL1BhZ2VzCi9Db3VudCAxCj4+CmVuZG9iagoyIDAgb2JqCjw8Ci9Qcm9kdWNlciAoUHlQREYyKQo+PgplbmRvYmoKMyAwIG9iago8PAovQ29udGVudHMgNSAwIFIKL1JvdGF0ZSAwCi9UeXBlIC9QYWdlCi9SZXNvdXJjZXMgPDwKL1Byb2NTZXQgWyAvUERGIC9UZXh0IF0KPj4KL0Nyb3BCb3ggWyAwIDAgNjEyIDc5MiBdCi9QYXJlbnQgMSAwIFIKL01lZGlhQm94IFsgMCAwIDYxMiA3OTIgXQo+PgplbmRvYmoKNCAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMSAwIFIKPj4KZW5kb2JqCjUgMCBvYmoKPDwKL0xlbmd0aCAxMAovRmlsdGVyIC9GbGF0ZURlY29kZQo+PgpzdHJlYW0KSIkCCDAAAAAAAQplbmRzdHJlYW0KZW5kb2JqCnhyZWYKMCA2CjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMDAwOSAwMDAwMCBuIAowMDAwMDAwMDY4IDAwMDAwIG4gCjAwMDAwMDAxMDggMDAwMDAgbiAKMDAwMDAwMDI3MyAwMDAwMCBuIAowMDAwMDAwMzIyIDAwMDAwIG4gCnRyYWlsZXIKPDwKL1NpemUgNgovUm9vdCA0IDAgUgovSW5mbyAyIDAgUgo+PgpzdGFydHhyZWYKNDAzCiUlRU9GCg==
If I add data:application/pdf;base64, to the beginning of the string, there are no errors, but also nothing is rendered.
The issue was:
I needed data:application/pdf;base64, in front of the string
I did not have a component inside of my component. See https://github.com/wojtekmaj/react-pdf/issues/203
I have a problem with the sending of „Post” by postman
The request is constructed in this way:
my request
When I add various headers, I receive always the response „no data”.
When I send the file by the website, on which I tried to send the request, I receive always the returnable file – sending exacly the same file which I sent by postman.
The Problem is that when I don't send the file from the website, I receive the request „no file” and even as I send the request from postman without the file, I receive the request „no data”
So how can i send the file ?
request headers
The field containing the file has a name, and it's not "Content-Disposition." Check the web site HTML, see what the name of the field is, and enter it as the name of the File field in Postman. Note that the file field name appears in the request body, not the headers. It will look something like this:
------WebKitFormBoundaryzp81ydREocuBHzYN
Content-Disposition: form-data; name="datafile"; filename="0041e2b.jpg"
Content-Type: image/jpeg
In this case the field name is "datafile."