Как создать междоменный запрос?

Как создать кросс-доменный запрос, используя Angular 2?

Можете ли вы привести пример?
Как запрос между localhost: 3000 и localhost: 8000 кросс-домен

Ответ 1

На самом деле в Angular2 нет ничего общего с запросами на междоменные запросы. CORS - это то, что поддерживается браузерами. Эта ссылка поможет вам понять, как это работает:

Чтобы быть коротким, в случае запроса кросс-домена браузер автоматически добавляет заголовок Origin в запросе. Есть два случая:

Простые запросы. Этот вариант использования применяется, если мы используем методы HTTP GET, HEAD и POST. В случае методов POST поддерживаются только типы контента со следующими значениями: text/plain, application/x-www-form-urlencoded и multipart/form-data.
Предварительно запрошенные запросы. Когда случай использования "простых запросов" не применяется, выполняется первый запрос (с помощью метода HTTP OPTIONS), чтобы проверить, что можно сделать в контексте междоменных запросов.

Таким образом, на самом деле большая часть работы должна выполняться на стороне сервера для возврата заголовков CORS. Основной из них - Access-Control-Allow-Origin.

200 OK HTTP/1.1
(...)
Access-Control-Allow-Origin: *

Чтобы отладить такие проблемы, вы можете использовать инструменты разработчика в браузерах (вкладка "Сеть" ).

Что касается Angular2, просто используйте объект Http, как и любые другие запросы (например, тот же домен):

return this.http.get('https://angular2.apispark.net/v1/companies/')
           .map(res => res.json()).subscribe(
  ...
);

Ответ 2

Для меня это была еще одна проблема. Для некоторых это может быть тривиальным, но мне понадобилось время, чтобы разобраться. Поэтому этот ответ может быть полезен для некоторых.

У меня установлен API_BASE_URL localhost:58577. Монета упала после прочтения сообщения об ошибке за миллионный раз. Проблема заключается в той части, где говорится, что она поддерживает только HTTP и некоторые другие протоколы. Мне пришлось изменить API_BASE_URL так, чтобы он включал протокол. Таким образом, сменив API_BASE_URL на http://localhost:58577, он работал отлично.

Ответ 3

Это нечего делать на стороне клиента. Я добавил @CrossOrigin в контроллер на стороне сервера, и он работает.

@RestController
@CrossOrigin(origins = "*")
public class MyController

Обратитесь к docs.

Лин

Ответ 4

По моему опыту плагины работали с http, но не с последним httpClient. Кроме того, настройка заголовков CORS respsonse на сервере не была действительно вариантом. Итак, я создал файл proxy.conf.json для работы в качестве прокси-сервера.

Подробнее об этом читайте здесь: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

ниже мой файл prox.conf.json

{
  "/posts": {
    "target": "https://example.com",
    "secure": true,
    "pathRewrite": {
    "^/posts": ""
  },
    "changeOrigin": true
  }
}

Я поместил файл proxy.conf.json прямо рядом с файлом package.json в том же каталоге

, то я изменил команду start в файле package.json, как показано ниже

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

теперь http-вызов из моего компонента приложения выглядит следующим образом

return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
  console.log(returnedStuff);
});

Наконец, чтобы запустить мое приложение, мне пришлось бы использовать npm start или ng serve --proxy-config proxy.conf.json

Ответ 5

@RestController
@RequestMapping(value = "/profile")
@CrossOrigin(origins="*")
public class UserProfileController {

SpringREST предоставляет аннотации @CrossOrigin, где (originins = "*" ) разрешает доступ к REST APIS из любого источника.

Мы можем добавить его в соответствующий API или весь RestController.

Ответ 6

Один из способов включить запрос кросс-домена в локальном браузере Chrome:

Создайте короткий фрагмент Google Chrome.
Свойства → добавить "--disable-web-security --user-data-dir" в конце цели.
Закройте или уничтожьте весь процесс google chrome.
Перезагрузите и нажмите UI-адрес.

Теперь пользовательский интерфейс и API, работающие на разных портах, смогут работать вместе. Надеюсь, это поможет.

Если вы ищете пример кросс-доменного запроса. Я поставлю фрагменты для вас, чтобы получить достаточное представление.

Угловой клиент: http://localhost: 4200/login
Spring web-api для проверки пользователя: http://localhost: 8091/SpringWebService/login '

Угловой клиент

user.service.ts, чтобы вызвать SpringWebservice.

 /** POST: Validates a user for login from Spring webservice */
      loginUrl = 'http://localhost:8091/SpringWebService/login';  // URL to web api

     validUser (user: User): Observable<User> {
        return this.http.post<User>(this.loginUrl, user, httpOptions)
       .pipe(
           catchError(this.handleError('Login User', user))
  );
}

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json;charset=utf-8',
    'Authorization': 'my-auth-token'
  })
};

login.component.html: принять имя пользователя и pwd.

<form (ngSubmit)="onSubmit(loginForm)" #loginForm="ngForm">
    <!-- //ngModel is a must for each form-control  -->
  <!-- 1st group -->
  <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" 
                required name="name"  ngModel #name="ngModel"> 

        <div [hidden]="name.valid || name.pristine"
                class="alert alert-danger">
             Name is required
        </div>
  </div> 
  <!-- 2nd group -->
  <div class="form-group">
      <label for="pwd">Password</label>
      <input type="text" class="form-control" id="pwd"
            name="pwd" #pwd required ngModel>
  </div>   

  <button type="submit" class="btn btn-success" [disabled]="!loginForm.valid">Submit</button>

</form>

login.component.ts: вызывает и подписывает метод validUser для user.service.

userModel : User;
onSubmit(loginForm : NgForm) { 
this.submitted = true; 
console.log("User : "+loginForm.value.name + " Valid :"+loginForm.valid)

this.userModel.loggedIn= false;
this.userModel=new 
User(loginForm.value.name.trim(),loginForm.value.pwd.trim())
// Passing the userModel to Service method to invoke WebAPI
this.userService.validUser(this.userModel).subscribe(user=>
    {
      if(user.loggedIn == false){
        console.log("Invalid User/PWD");

       }
      else{
        this.userService.changeUser(this.userModel);
        this.router.navigate(['/home']);
      }
  }
);

user.ts: модель.

export class User {

constructor(
    public  name : String,
    public  pwd : String,
    public  email ?: String, //optional
    public  mobile ? : number,//""
    public  loggedIn : boolean = false
){  }
}

Spring Webservice.

package com.rest;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@RestController
// This annotation opens door for cross-domain(Cross-origin resource sharing (CORS)) from any host
@CrossOrigin(origins="*") 
public class MainController {

     @RequestMapping(value="/login", method=RequestMethod.POST)
     public User validUser(@RequestBody User user){


         BaseResponse response = new BaseResponse();

         if(user.getName().equalsIgnoreCase("shaz") && user.getPwd().equals("pwd")){

             user.setLoggedIn(true);
         }
         else{

             user.setLoggedIn(false);

         }
         return user;

     }
}

Теперь, когда вы передаете имя как "shaz" и pwd как "pwd" в форме и нажимаете submit, он получает подтверждение от SpringWebService, а флаг loggedIn имеет значение true, и пользовательский объект возвращается в ответ. Исходя из состояния loggedIn от ответа, пользователь перенаправляется на домашнюю страницу или возникает ошибка.

Детали страницы и сети входа

Примечание. Я не передал полную установку и код

См. Это: https://shahbaazdesk.wordpress.com/2018/04/03/angular5-with-spring-webservice/

Ответ 7

Здесь много длинных (и правильных) ответов. Но обычно вы не будете делать это вручную - по крайней мере, когда вы не создаете свои первые проекты для развития (здесь вы обычно натыкаетесь на эти вещи). Если вы используете koa для бэкэнд: используйте koa-cors. Установить через npm...

npm install --save koa-cors

... и использовать его в коде:

const cors = require('koa-cors');
const Koa = require('koa');
const app = new Koa();
app.use(cors());

проблема решена.