Angular $ HTTP: проблемы с CORS - PullRequest
Новая
       11

Angular $ HTTP: проблемы с CORS

0 голосов
/ 03 июля 2018

Я получаю сообщение об ошибке 502, когда я звоню на свою точку API, используя $http в угловом направлении.
Точная ошибка говорит об этом:

Не удалось загрузить https://xxxxxxxxx.execute -api.eu-west-2.amazonaws.com / dev / api / fund : заголовок «Access-Control-Allow-Origin» отсутствует в запрошенном ресурс. Происхождение 'http://localhost:3000' поэтому не допускается Ответ имеет HTTP-код состояния 502.

Однако я проверил с помощью Почтальона, был ли этот заголовок в ответе: 

Access-Control-Allow-Origin →*
Connection →keep-alive
Content-Length →30
Content-Type →application/json
Date →Tue, 03 Jul 2018 10:01:11 GMT
Via →1.1 xxxxxxxxxxxxxxxxxxxxxxxxxxxx.cloudfront.net (CloudFront)

Когда я выполняю вызов OPTIONS для того же URL, здесь находится заголовок ответа с использованием Почтальона: 

Access-Control-Allow-Credentials →false
Access-Control-Allow-Headers →Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,X-Amz-User-Agent
Access-Control-Allow-Methods →OPTIONS,POST
Access-Control-Allow-Origin →*
Connection →keep-alive
Content-Length →0
Content-Type →application/json
Date →Tue, 03 Jul 2018 10:18:17 GMT
Via →1.1 xxxxxxxxxxxxxxxx.cloudfront.net (CloudFront)
X-Amz-Cf-Id →T_CC-vaqRAoxqnzFZdB9KMI9CAIPQvKAxCat2NPLyaJ5MPpdTVhF1g==
X-Cache →Miss from cloudfront
x-amz-apigw-id →JckIhHWmrPEFcqQ=
x-amzn-RequestId →675517fc-7eaa-11e8-8290-39c903c321e4

Вот код, который я пытался вызвать API, довольно просто, я действительно запутался в том, что может быть ошибкой: 

  $scope.fundAsset = function(assetID, userID){
    $http({
      method: 'POST',
      url: 'https://xxxxxxxxxxx.execute-api.eu-west-2.amazonaws.com/dev/api/fund',
      body: {
        userID: userID,
        assetID: assetID
      }
    }).then(function successCallback(response) {
      console.log(response);
    });
  };

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Chrome не поддерживает localhost для запросов CORS (открытая ошибка с 2010 года).

Чтобы обойти это, вы можете использовать домен вроде lvh.me (который указывает на 127.0.0.1, как localhost) или запустить chrome с флагом --disable-web-security (при условии, что вы просто тестируете). Также, чтобы быть уверенным, на стороне сервера убедитесь, что вы:

  • Разрешить Access-Control-Expose-Headers: Access-Control-Allow-Origin
  • Access-Control-Allow-Origin: *
  • включить доступ к ОПЦИИ запрашивает также
0 голосов
/ 03 июля 2018

В вашей функции Lambda убедитесь, что вы возвращаете заголовок Access-Control-Allow-Origin. 

        var response = {
             statusCode: 200,
             headers: {
                 "Access-Control-Allow-Origin" : "*"
             },
             body: JSON.stringify({
                 someReturnData
             })
        };
        callback(null, response);

Чтобы экстраполировать это немного больше, это из моего рабочего решения:

serverless.yml 

functions:
  ping:
    handler: index.ping
    events:
      - http:
        path: ping 
        method: post
        cors:
          origins:
            - '*'
          headers:
            - Content-Type
            - X-Amz-Date
            - Authorization
            - X-Api-Key
            - X-Amz-Security-Token
          allowCredentials: true

index.js (лямбда-функция) 

'use strict';

module.exports.ping = (event, context, callback) => {
    const response = {
        statusCode: 200,
        headers: {
                "Access-Control-Allow-Origin" : "*"
              },
        body: JSON.stringify({
            message: 'Pong',
            input: event,
        }),
    };
    callback(null, response);
};

ping.controller.js (контроллер AngularJS) 

$http({
    method: 'POST',
    url: config.apiRoot + '/ping',
    headers: {
        'Content-Type': 'application/json',
    },
    data: JSON.stringify(data)
}).then(
    function successCallback () {
        $scope.feedback = "Ping Success";
    },
    function errorCallback (response) {
        $scope.feedback = "Ping Failed: " + JSON.stringify(response))
    }
);
...