Question

我使用angularJs，我需要访问外部网址。

外部网址将用于获取邮政编码信息。

网址具有下一种格式：https://viacep.com.br/ws/ {zipcode} / json /

示例：https://viacep.com.br/ws/23020180/json/ 我已经使用了下一个，但我总是遇到错误。

我已经尝试了w / o $ sce和/或包含标题，但没有成功。

如果我使用Postman，我会得到正确的结果：

{
  "cep": "01001-000",
  "logradouro": "Praça da Sé",
  "complemento": "lado ímpar",
  "bairro": "Sé",
  "localidade": "São Paulo",
  "uf": "SP",
  "unidade": "",
  "ibge": "3550308",
  "gia": "1004"
}

但是使用我的代码，我收到了一个错误：

//错误：

    XMLHttpRequest cannot load https://viacep.com.br/ws/23020180/json/. 
Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

    angular.js:14328 Possibly unhandled rejection:
    {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":{},"headers":{"Access-Control-Allow-Credentials":"true","Access-Control-Allow-Headers":"Content-Type, X-Request-With, X-Requested-By","Access-Control-Allow-Methods":"GET, OPTIONS","Access-Control-Allow-Origin":"*","Accept":"application/json, text/plain, */*","Authorization":"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VsadfsdW8iLCJpYXQiOjE0OTQ1Mzg4ODN9.JOUl55vmscTSGc2XWWi0fRGYdPKJSZDOSlRUBdStHvU"}},"statusText":""}

//前端标记

var trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
   };

  $scope.findCEP=function(){
     var viaCepUrl = "https://viacep.com.br/ws/23020180/json/";
     $http({
         method: 'GET',
         url:trustSrc(viaCepUrl),
         headers:{'Access-Control-Allow-Credentials':'true',
            'Access-Control-Allow-Headers':'Content-Type, X-Request-With, X-Requested-By',
            'Access-Control-Allow-Methods':'GET, OPTIONS',
            'Access-Control-Allow-Origin':'*'}
         }
     ).then(function(response) {
        console.log(response);
      });
  };

Answer 1

这与几个星期前我遇到的问题完全相同。不幸的是，事情并不那么容易。有一个非常好的CORS文档HERE。这真的帮助我解决了我的问题。

主要思想是有两种类型的请求：简单请求和复杂请求。现在，如果我们谈论简单的请求，那些就不会得到预检。为了使大多数浏览器认为请求简单，它具有GET或POST作为方法，并且允许手动设置的唯一允许的自定义标头如下：

接受，接受语言，内容语言，内容类型（但请注意下面的附加要求）， DPR，下行，保存数据，视口宽度，宽度，

Content-Type标头唯一允许的值是：

应用程序/ x-WWW窗体-urlencoded，多部分/格式数据，文本/无格式，

就我而言，我做了以下事情：

httpRequest.open('POST', "https://s2events.andSoOn.net", true);
httpRequest.setRequestHeader("Accept", "application/json");
//httpRequest.setRequestHeader("From", "my@email.com")
httpRequest.send(JsonWebhookData);

所以我已经注释掉了我的“From”标题。从那一刻起，我的请求在没有预检检查的情况下发送，问题得到了解决。因此，请尝试取出不一定需要的所有自定义标头。您使用的大多数标头都是特定于CORS的，并且通常由浏览器设置，根据我在开始时分享的文档。希望它有所帮助。

访问外部网址时出现角度预检响应错误

1 个答案: