Question

如何使用Angular 2创建跨域请求？

你能提供一个例子吗？就像localhost：3000和localhost：8000跨域

之间的请求一样

Answer 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(
  ...
);

Answer 2

对我来说这是另一个问题。对某些人来说这可能是微不足道的，但我花了一段时间才弄明白。所以这个答案可能对某些人有所帮助。

我将API_BASE_URL设置为localhost:58577。在读取错误消息第百万次后，硬币掉落了。问题在于它表示它只支持HTTP和其他一些协议。我不得不更改API_BASE_URL以便它包含协议。因此，将API_BASE_URL更改为http://localhost:58577，效果非常好。

Answer 3

在客户端，你无能为力。我在服务器端的控制器中添加了@CrossOrigin，它可以工作。

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

请参阅docs。

林

Answer 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文件旁边

然后我修改了package.json文件中的start命令，如下所示

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

现在，来自我的app组件的http调用如下

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

最后要运行我的应用，我必须使用 npm start 或 ng serve --proxy-config proxy.conf.json

Answer 5

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

SpringREST提供 @CrossOrigin 注释，其中（起源=＆＃34; *＆＃34;）允许从任何来源访问REST APIS。

我们可以将它添加到相应的API或整个RestController。

Answer 6

在本地Chrome浏览器上启用跨域请求的方法之一：

创建一个谷歌浏览器的捷径。
属性 - ＆gt;追加＆＃34; - disable-web-security --user-data-dir＆＃34;在目标结束时。
关闭或终止谷歌浏览器的所有流程。
重新启动并点击UI网址。

现在，在不同端口上运行的UI和API将能够协同工作。我希望这会有所帮助。

如果您正在寻找跨域请求的示例。我会把它分成碎片让你有足够的想法。

Angular客户：http://localhost:4200/login
Spring web-api验证用户：http://localhost:8091/SpringWebService/login＆＃39;

Angular Client

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 ：接受用户名和密码。

<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 ：调用并订阅user.service的validUser方法。

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;

     }
}

现在当你将名字传递给＆＃34; shaz＆＃34;和pwd as＆＃34; pwd＆＃34;在表单和命中提交中，它从SpringWebService验证，并且loggedIn标志设置为true，并返回用户实体作为响应。根据响应中的loggedIn状态，用户被重定向到主页或抛出错误。

登录页面和网络详情

注意：我还没有分享完整的设置和代码

请参阅：https://shahbaazdesk.wordpress.com/2018/04/03/angular5-with-spring-webservice/

Answer 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());

问题解决了。

如何创建跨域请求？

7 个答案: