2

I am currently working on a spring project, and I am designating uri using a page controller. We need to use uri short API now. There is a problem. The way that we're doing it is PHP. But I have to use the code in JavaScript.

I tried this code.

    data = {};
    data.key = "ehelkhej45jjb38h6f5234234hg";
    data.short = "www.google.com";
    data.name = "googleuri"

    $.ajax({
        url : "https://cutt.ly/api/api.php",
        type : "POST",
        dataType : "json",
        beforeSend : function(xhr){
            xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        },
        data : data,
        success : function(result) {
            console.log(result);
        }
    });

This has caused me an error.

Access to XMLHttpRequest at 'https://cutt.ly/api/api.php' from origin 'http://localhost:11000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. jquery-1.9.1.js:8526 POST https://cutt.ly/api/api.php net::ERR_FAILED

I could tried Postman

postman

When I first called this, the body was empty and status : 500Internal Server Error. But when I call again, I get a response like a picture.

And I could tried GET and jsonp but it was Blocked

    $.ajax({
        url : "https://cutt.ly/api/api.php",
        type : "GET",
        dataType : "jsonp",
        data : data,
        success : function(result) {
            console.log(result);
        }
    });

Block ERROR

jquery-1.9.1.js:8336 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://cutt.ly/api/api.php?callback=jQuery191049576531804679713_1565245716711&key=ehelkhej45jjb38h6f5234234hg&short=www.google.com&name=googleuri&_=1565245716712 with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

What I've tried. It was worked. But it is error

GET http://cors-anywhere.herokuapp.com/https://cutt.ly/api/api.php?key=ehelkhej45jjb38h6f5234234hg&short=redisgate.kr&name=redisgate 500 (Internal Server Error)

var options = "https://cutt.ly/api/api.php?key=ehelkhej45jjb38h6f5234234hg&short=www.google.com&name=googleuri"


$.ajaxPrefilter( function (options) {
        if (options.crossDomain && jQuery.support.cors) {
          var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
          options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
          }
        });

$.get(
    options,
         function (response) {
             console.log("> ", response);
});

This link is the link that has API usage. How can you solve this problem?

helpmesolution
  • 83
  • 2
  • 11
  • 1
    You're getting the CORS error on the POST probably because that API doesn't support POSTs. You're getting the CORB error when you're trying the GET in jQuery because that API is responding to your GET with content-type `text/html` when it should be responding (probably) with type `application/json`. Your browser will block `text/html` from a cross-origin request as a security measure. It looks like that API was really only intended to be used server-side. – Ben Chamberlin Aug 08 '19 at 07:19
  • @Phil I solved the error by referring to the answers you linked, but there is no return value. Why? – helpmesolution Aug 08 '19 at 07:25
  • @BenChamberlin I edited out the question. There's a code I've corrected for the error, but it doesn't give me any response value. What is the reason? – helpmesolution Aug 08 '19 at 07:26
  • When I run your updated example, I get `{"url":{"status":4}}`. Seems like the proxy runs really slow sometimes (took 8 seconds for me a couple times). If that's what you're seeing after the proxy is done, the api key is invalid. – Ben Chamberlin Aug 08 '19 at 07:57
  • @BenChamberlin Look at my question. Error waiting for response value. The key value is incorrect for you to see the result like that way. – helpmesolution Aug 08 '19 at 08:17

0 Answers0