Read Script content file from CDN as Text instead of execute script - javascript

I'm trying to read script content file by GET request and I have cross origin issue but if I load it as script, it's working fine
ex: JQuery url for describe issue:
const cache: RequestInit["cache"] = "no-cache";
const news = await request<string>(
url,
"GET",
{
"Access-Control-Allow-Origin": "*",
"Content-Type": "text/html; charset=UTF-8",
},
undefined,
undefined,
cache,
);
Any help?

Related

How can I get JSON data from URL by using AJAX in javascrript

Here when I trying to print response in browser console. It shows this error
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://script.google.com/macros/s/AKfycbwmqG55tt2d2FcT_WQ3WjCSKmtyFpkOcdprSITn45-4UgVJnzp9/exec?url=http://35.230.52.177:8095/OneSoftTracking/rest/tracking/consignment/AE101632?hostname=aastha-enterprises.com&callback=jQuery1124008693115102408444_1561964934754&_=1561964934755 with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.`
While when I get data in Postman like:
This warning or error showing :
This is my code :
var settings = {
async: true,
crossDomain: true,
crossOrigin: true,
url: "http://35.230.52.177:8095/OneSoftTracking/rest/tracking/consignment/AE101632?hostname=aastha-enterprises.com",
method: "GET",
"headers": {
"Content-Type":"application/json",
"Access-Control-Allow-Origin":"*",
'Access-Control-Allow-Methods':'GET',
'Access-Control-Allow-Credentials' : true,
"Accept": "*/*",
"Cache-Control": "no-cache",
"Postman-Token": "bea2b074-eefc-473e-84d7-b680a07ed7df,dafa4f5c-94af-4efe-967f-75a9fe185a1e",
},
success: function(data) {
console.log("+++++SuCCESS");
console.log(data);
},
error: function(error){
console.log("NOT SUCCEED");
}
}
$.ajax(settings).done(function (response) {
console.log(response);
});
You haven't shown us your real code.
The error message clearly shows a callback in the query string which isn't in your URL and shouldn't be added because you haven't said dataType: 'jsonp' in the jQuery ajax configuration.
Your real code is configured to use JSONP.
A JSONP response is a JavaScript program (specifically one which calls a single function with a set of arguments). The response you are getting from the server is an HTML document (the content type is text/html and not application/javascript).
The CORB error is the browser telling you that the response is HTML and not JSONP so it is refusing to try to execute it.
The Postman screenshot shows that you are expecting a JSON (still not JSONP) response (but you aren't getting that either).
You need to either:
Change the server to respond with JSONP
Change the request to ask for the correct data (and possibly also change the server to grant you permission to read it using CORS)
Further reading:
What is JSONP, and why was it created?
XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header
Notes about your code:
async: true,
This is the default, get rid of it
crossDomain: true,
This is the default for cross origin requests, get rid of it.
crossOrigin: true,
This is the default for cross origin requests, get rid of it.
method: "GET",
This is the default, get rid of it
"Content-Type": "application/json",
You are making a GET request. There is no request body to describe the type of. This is nonsense. Get rid of it.
"Access-Control-Allow-Origin": "*",
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Credentials': true,
These are response headers, not request headers. Putting them on the request is nonsense. Get rid of them.
"Accept": "*/*",
The default is almost certainly going to be fine. You probably don't need to override it.
"Cache-Control": "no-cache",
The main config option "cache" is probably a better choice than explicitly setting the header.
"Postman-Token": "bea2b074-eefc-473e-84d7-b680a07ed7df,dafa4f5c-94af-4efe-967f-75a9fe185a1e",
The odds of your server caring about this are remote. You can probably get rid of this.

Can't add a file to fetch POST request

I have a request that succeeds in postman, but just fails when I call it from my JS code. The requests are similar in the Chrome dev tools, and I suspect that I'm just not adding the file correctly. This is how the file is added in the postman:
This is my JS code:
let formData = new FormData();
formData.append('file', event.target.files[0]);
fetch('http://localhost:8080/file/upload', {
method: 'POST',
headers:{
'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer ' + JWT
},
body:formData
}).then(response => console.log(response));
This code is executed when the file of an input (type='file') changes. When I console.log the event.target.files[0], I get:
Am I adding the file wrong?
'Content-Type': 'multipart/form-data',
multipart/form-data needs a parameter to describe the boundry marker.
fetch will generate an appropriate Content-Type header automatically, but you are overriding it and replacing it with a broken one.
Remove that line.

Avoid CORS while calling SHAREPOINT REST API

I've created VS project - Sharepoint add in (sharepoint-hosted). Im trying to call sp rest api from js ajax, code below.
$.ajax({
url: "http://MYSITE/_api/web/lists/getbytitle('Kontrahenci')/items",
method: "GET",
headers: {
"Accept": "application/json; odata=verbose",
"Access-Control-Allow-Origin": "*"
},
crossDomain: true,
xhrFields: { withCredentials: true },
success: function (data) {
var results = data.d.results;
for (var i = 0; i < data.d.results.length; i++) {
console.log(data.d.results[i].Title);
}
},
error: function (error) {
console.log(error);
}
})
But i cannot do that, im always getting error:
XMLHttpRequest cannot load
http://MYSITE/_api/web/lists/getbytitle('Kontrahenci')/items.
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin
'http://app-802ce2286e9d83.MYSITE' is therefore
not allowed access. The response had HTTP status code 401.
Ofc MYSITE = my url address.
I can connect via browser to url from ajax, and after authorizing (login,password from sharepoint) im getting data.
I also added in app.manifest permissions for Lists(read, and selecting list while building app) and full-control for Web.
When im enable chrome sth like that it works:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
--disable-web-security --user-data-dir="D:\chrome"
But its not a solve of this problem.

Not able to send header with xhrfield

I am trying to get flipkart api data . like this but i am not able to send heder with xhrfield
HERE IS MY CODE :
$.ajax({
type: 'GET',
url:'https://affiliate-api.flipkart.net/affiliate/search/json?query=iPhone+mobiles&resultCount=3',
crossDomain: true,
// dataType: 'JSONP',
/*xhrFields: {
withCredentials: true
},*/
// contentType: 'application/json; charset=utf-8',
beforeSend : function(xhr) {
xhr.withCredentials = true;
xhr.setRequestHeader('Fk-Affiliate-Id', 'myid');
xhr.setRequestHeader('Fk-Affiliate-Token', 'mytoken');
},
/* headers: {
'Access-Control-Allow-Origin':'*',
'Fk-Affiliate-Id': 'myid',
'Fk-Affiliate-Token': 'mytoken',
'Content-Type': 'application/x-www-form-urlencoded'
},*/
success: function(data){ ......
}
});
As you can see comment i ahve tried both but not able to send header with xhrfield . if i comment xhrfield header wil be send
You can not send a header with a JSONP requests since all it does is set a script tag to the page.
A JSONP requests consists of appending a script tag to the page. It adds a callback parameter to the URL which the script listens for when the script is executed. There is no way to add the header to a external script.
The site would need to support JSON request for CORs to send the header.

Facing issue while using CORS in a sample project

I have this code for sending in request to a website for ping.
I don't want to use jsonp (it works fine with that). I was trying to implement cors but still getting the issue of header "No 'Access-Control-Allow-Origin' header is present on the requested resource."
I kind of tried all the links online but non of them worked so far.
$.ajax({
url: 'https://example.com//payme/',
type: 'post',
crossDomain: true,
strictSSL: false,
data: JSON.stringify({
"test": false,
"language": "en",
"command": "PING",
"merchant": {
"apiLogin": "test",
"apiKey": "test"
}
}),
contentType: 'application/json; charset=utf-8',
headers: {
"Content-Type": "application/json; charset=utf-8",
'Accept': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods':'GET, POST, PUT'
},
dataType: 'json',
success: function (data) {
console.info(data);
}
});
CORS headers HAVE to be supplied by the server. They are NOT something you can add in your request from the client.
The server adds the CORS headers to the response and that gives the browser permission to allow the cross-origin request. If the CORS headers are not present, the browser will disallow the request. You can't fix this from the client. CORS has to be specifically supported on the server.

Categories