Question

我已经创建了一个Angular服务，它是具有自己后端的授权服务。

我必须将表单数据发送到后端，reqData = {“ username”：“ string”，“ password”：“ string”}

和一些标准标题。

我的登录组件。

onSignIn(form: NgForm) {
  const email = form.value.email;
  const password = form.value.password;

  const reqData = {
    'app_uname': email,
    'app_pass': password
  };

  const response = this.authService.signInUser(reqData);
}

我的authService：

signInUser(reqData){
    const headerInfo = new Headers({
                                            'Content-Type': 'text/plain',
                                            'X-TIME-ZONE': '+5.30',
                                            'X-DEVICE-ID': '911422351920594',
                                            'X-APP-VERSION': '45',
                                            'X-APP-CHANNEL-NAME': 'ANDROID',
                                            'X-DEVICE-OS-VERSION': '45',
                                            'X-DEVICE-MODEL': 'ANDROID'
                                            });
    const request = this.http.post('http://server-ip/login', reqData, {headers: headerInfo});

    request.subscribe(
          (response) => console.log('Success' + response),
          (error) => console.log('Error' + error)
    );
}

我现在只是在检查我是否能够发送数据。

我在日志中收到此错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://server-ip/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]


Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://server-ip/login. (Reason: CORS request did not succeed)

目前，我的Angular应用程序是本地托管的，我的后端在另一台计算机上，并且通过lan进行通信。

如果我在邮递员中发送相同的请求，那很好，我将请求数据作为表单数据发送：密钥应为reqData，值应为JSON。

我在打字稿中做错了吗？

Answer 1

您需要设置CORS。相同来源策略阻止了您对服务器的请求。假设您有2台服务器（example.com和example.org）。用户访问example.com。除非由于相同来源策略而启用了CORS，否则该网页无法向example.org发出请求。启用CORS时，将绕过相同原产地策略。

要启用CORS，请添加一个“ Access-Control-Allow-Origin：*标头”。

我猜是邮递员，没有实施相同原产地政策。

Answer 2

如果您的api服务允许CORS，那么您应该在angular项目中设置代理尝试在角度项目中创建文件。

proxy.config.json

{
    "/your api": {

           "target": "http://your sever:port",

           "secure": false
    },
}

使用命令ng serve --proxy-config=proxy.conf.json替换ng serve

Answer 3

您必须允许cors请求，因为您的客户端和服务均部署在不同的域中。因此，在服务器上安装cors并允许客户端连接。请参阅：-https://www.baeldung.com/spring-cors

跨域请求被阻止，发布请求为Angular和Spring

3 个答案: