Почему этот http-запрос не работает в angular 4, но проходит через скрипача?

У меня есть запрос http post через fiddler: использование

http://localhost:58183/api/Account/Register

с телом

{"email":"[email protected]","password":"Abc1231*","confirmPassword":"Abc1231*"}

Это выполняется просто отлично, и электронная почта регистрируется в базе данных удостоверений на webapi 2.

Однако у меня есть следующий код в моем authorize.service.ts:

 registerUser(localUser: LocalUser) {
        var headers = new Headers();
        headers.append('Content-Type', this.constants.jsonContentType);
        var creds = JSON.stringify(localUser);
        console.log(creds);
        console.log(this.constants.accountUrl + "Register");

        return this.http.post(this.constants.accountUrl + "Register", creds, { headers: headers })
            .map(res => res.json());
    }

creds = 
{"email":"[email protected]","password":"Abc1231*","confirmPassword":"Abc1231*"}

url = http://localhost:58183/api/Account/Register
json-contentType = "application/json;charset=UTF-8";

Консоль показывает: SCRIPT7002: XMLHttpRequest: ошибка сети 0x80070005, доступ запрещен.

home HTML1300: произошла навигация. home Предупреждения о синтаксическом анализе шаблона: элемент устарел. Вместо этого используйте ("-child ui-shadow':!root}" class="ui-menu-list" (click)="listClick($event)"> [ВНИМАНИЕ ->] http://localhost:58183/api /Account/Register author.service.ts (47,9) SCRIPT7002: XMLHttpRequest: ошибка сети 0x80070005, доступ запрещен.

home ОШИБКА SyntaxError: недопустимый символ core.es5.js (1020,1) «ОШИБКА» { [функции]: , proto: {}, описание: «Недопустимый символ», сообщение: «Недопустимый символ» , имя: "SyntaxError", номер: -2146827274, стек: "SyntaxError: недопустимый символ в анонимной функции (http://localhost:4200/main.bundle.js:788:13) в SafeSubscriber.prototype.__tryOrUnsub (http://localhost:4200/vendor.bundle.js):37370:13) в SafeSubscriber.prototype.error (http://localhost:4200/vendor.bundle.js:37329:21) в Subscriber.prototype._error ( http://localhost:4200/vendor.bundle.js:37260:9) в Су bscriber.prototype.error (http://localhost:4200/vendor.bundle.js:37234:13) по адресу Subscriber.prototype._error (http://localhost:4200/vendor.bundle.js:37260:9) в Subscriber.prototype.error (http://localhost:4200/vendor.bundle.js:37234:13) при ошибке onError (http://localhost:4200/vendor.bundle.js:108672:17) в ZoneDelegate.prototype.invokeTask (http://localhost:4200/polyfills.bundle.js:2836:13) в onInvokeTask (http://localhost:4200/vendor.bundle.js:90272:21)" }

HTTP405: НЕПРАВИЛЬНЫЙ МЕТОД. Используемая команда HTTP не поддерживается. ВАРИАНТЫ (XHR) — http://localhost:58183/api/Account/Register

Я не могу понять это. Заранее благодарю за любую помощь.


angular angular-router
person John Baird    schedule 16.06.2017    source источник
comment
Боковое примечание: вы можете пропустить JSON.stringify вашего localUser и передать его непосредственно вашему вызову http.post в качестве объекта. Angular упорядочит его для вас и автоматически добавит заголовок content-type: application/json. Что касается отладки вашей проблемы, попробуйте посмотреть запрос в ваших инструментах разработчика и, возможно, сравнить его с вашим запросом скрипача?   -  person matmo    schedule 16.06.2017
comment
Я предполагаю, что это связано с запросами перекрестного происхождения и использованием локального хоста.   -  person ppovoski    schedule 16.06.2017
comment
Я сделал это... запросы кажутся идентичными..   -  person John Baird    schedule 17.06.2017
comment
@ppovoski Можете ли вы добавить свой комментарий, чтобы я мог отметить его как ответ?   -  person John Baird    schedule 17.06.2017
comment
Я мог бы, но уже есть много отличной информации о stackoverflow относительно CORS, хотя ничего конкретного для Angular4. Вместо того, чтобы искать конкретный ответ, он у вас уже есть. Добавьте свое решение в качестве правильного ответа. Это поможет другим, кто столкнулся с этой проблемой. Я согласен со сноской. :)   -  person ppovoski    schedule 18.06.2017

Ответы (3)


arrow_upward
0
arrow_downward

Я добавил атрибуты cors в конфигурацию webapi... и все заработало... var cors = new EnableCorsAttribute("", "", "GET,PUT,POST,PATCH,DELETE,OPTIONS"); config.EnableCors (корс);

person John Baird    schedule 19.06.2017

arrow_upward
0
arrow_downward

Обычно это происходит, если в вашем приложении нет файла proxy.conf.json, разрешающего трафик тура на сервер через другой порт. В Angular есть функция, которая блокирует переход трафика на другой порт, если вы не принуждаете его. Если у вас нет proxy.conf.json файла, вам нужно сделать это на вашем app root

прокси.conf.json

 {
    "/api": {
      "target": "http://localhost:serverPort",
      "secure": false
    }
  }

прокси.config.js

const PROXY_CONFIG = [
  {
    context: [
      "/api",
      "/auth",
      "/oauth"
    ],
    target: "http://localhost:8080",
    secure: false
  }
];

module.exports = PROXY_CONFIG;

И обновите package.json

"scripts": {

    "ng": "ng",

    "start": "ng serve --proxy-config proxy.conf.json",

    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },

Это позволит всему, что после /api, добраться до сервера.

person Praveen Premaratne    schedule 16.06.2017
comment
Вы вообще можете звонить на сервер? Любые другие методы? - person Praveen Premaratne; 17.06.2017
comment
Я добавил атрибуты cors в конфигурацию webapi... и все заработало... var cors = new EnableCorsAttribute(,, GET,PUT,POST,PATCH,DELETE,OPTIONS); config.EnableCors (корс); - person John Baird; 17.06.2017
comment
@PraveenM У меня похожая проблема, мне нужно явно добавить файл proxy.conf.json в папку моего приложения и обновить файл package.json, как указано в вашем посте? - person Juniuz; 28.10.2017
comment
@Juniuz Вам понадобится файл proxy-config, но не обязательно добавлять его в package.json. Если вы добавите к package.json, вам не нужно будет объявлять существование proxy-config каждый раз, когда вы запускаете npm start или ng serve, поскольку package.json будет указывать NPM о существовании файла proxy-config. - person Praveen Premaratne; 28.10.2017
comment
Итак, как мне сгенерировать этот proxy-config.json файл? Кстати, я использую Visual Studio 2017 Community Edition. - person Juniuz; 28.10.2017
comment
Вы не можете сгенерировать его, просто создайте файл на том же уровне, что и package.json, и добавьте конфигурацию в файл. Однако я рекомендую использовать .js вместо .json, так как это намного аккуратнее. Добавлю js версию в пост выше. - person Praveen Premaratne; 28.10.2017
comment
@Juniuz Как видите, гораздо удобнее добавлять несколько endpoints - person Praveen Premaratne; 28.10.2017
comment
@PraveenM Итак, я создал файлы proxy.conf.json и proxy.config.js и поместил их на тот же уровень, что и package.json в корне моего приложения. И в моем файле package.json внутри объявления объекта scripts у меня есть это свойство "start": "concurrently \"npm run build:watch\" \"npm run serve\" ng serve --proxy.config proxy.conf.json", Но, тем не менее, я столкнулся с ресурсом Failed to load: сервер ответил со статусом 400 (неверный запрос), когда я запускаю приложение под своим локальным хостом . Я что-то пропустил? - person Juniuz; 29.10.2017
comment
@Juniuz Вам не нужны и json, и js. Просто нужен один из них. Вам нужно добавить ng serve --proxy-config fiileName. На данный момент у вас есть --proxy-config с . вместо -. - person Praveen Premaratne; 29.10.2017

arrow_upward
0
arrow_downward

Обычно это происходит, если в вашем приложении нет файла proxy.conf.json, разрешающего трафик тура на сервер через другой порт. В Angular есть функция, которая блокирует переход трафика на другой порт, если вы не принуждаете его. Если у вас нет proxy.conf.json файла, вам нужно сделать это на вашем app root

person Praveen Premaratne    schedule 29.10.2017