【问题标题】:ERROR Failed to load resource: the server responded with a status of 403 () en angular错误加载资源失败:服务器响应状态为 403 () en angular
【发布时间】:2020-03-17 03:16:08
【问题描述】:

Errors I get

错误:

Failed to load resource: the server responded with a status of 403 ()
login:1 Access to XMLHttpRequest at 'http://localhost:8080/login' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
core.js:7187 ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null,"headers":{}},"status":0,"statusText":"Unknown Error","url":"http://localhost:8080/login","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://localhost:8080/login: 0 Unknown Error","error":{"isTrusted":true}}
    at resolvePromise (zone-evergreen.js:797)
    at zone-evergreen.js:707
    at SafeSubscriber._error (Observable.js:91)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.error (Subscriber.js:135)
    at Subscriber._error (Subscriber.js:75)
    at Subscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at FilterSubscriber._error (Subscriber.js:75)
defaultErrorLogger @ core.js:7187

JAVA spring boot中的POST服务(微服务的url:http:localhost:8080/login):

@CrossOrigin(origins = "*")
@RestController
public class dmoController {

    @SuppressWarnings("rawtypes")
    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody String data) {
	System.out.print("entra");
	System.out.print(data);
	HttpHeaders headers = new HttpHeaders();
	headers.add("Access-Control-Allow-Origin", "*");
	headers.add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
	headers.add("Access-Control-Allow-Headers", "X-Requested-With,content-type");
	headers.add("Access-Control-Allow-Credentials", "true");
	return new ResponseEntity<>(headers, HttpStatus.CREATED);
    }

    
}

从 Angular 调用发帖(url angular: http:localhost:4200/login):

  public async login(email: string, password: string) {
        const data = { username: 'pepa', password: 'manoli' };

        httpOptions.headers.append('Access-Control-Allow-Origin', '*');
        httpOptions.headers.append(
            'Access-Control-Allow-Methods',
            'GET, POST, OPTIONS, PUT, PATCH, DELETE',
        );
        httpOptions.headers.append(
            'Access-Control-Allow-Headers',
            'X-Requested-With,content-type',
        );
        httpOptions.headers.append('Access-Control-Allow-Credentials', 'true');

        this.http.post(this.url, JSON.stringify(data), httpOptions).toPromise();
    }

【问题讨论】:

  • 请用英文写下您的问题。
  • 你好玛丽亚! bienvenida 一个stackoverflow。 Si no hablas ingles, puedes poner tu pregunta aqui: es.stackoverflow.com
  • @CodIng59 你需要对 stackoverflow 上的人更加友善。让她感到宾至如归,并为她指明正确的方向,或者以礼貌的方式问她,将她的问题改为英语。

标签: java angular spring rest api


【解决方案1】:

解析 Cors 不是客户端的事情,因为它是您的本地主机开发,请求来源会有所不同。 您需要将服务器配置为允许来自所有来源的请求。

看看这个链接https://spring.io/guides/gs/rest-service-cors/你可能会发现一些见解。

【讨论】:

  • 为 cros 配置服务器不是我已经设置的吗?这: HttpHeaders 标头 = 新 HttpHeaders(); headers.add("Access-Control-Allow-Origin", "*"); headers.add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT"); headers.add("Access-Control-Allow-Headers", "X-Requested-With,content-type"); headers.add("Access-Control-Allow-Credentials", "true");
  • 你能粘贴完整的请求和头部负载吗?
  • 我就这样离开了,它也不起作用:public async login(email: string, password: string) { const data = { username: 'pepa', password: 'manoli ' }; this.http.post(this.url, JSON.stringify(data), httpOptions).toPromise(); }
  • @RequestMapping(value = "/login", method = RequestMethod.OPTIONS) public ResponseEntity> login(@RequestBody String data) { System.out.print("entra"); System.out.print(数据); HttpHeaders 标头 = 新的 HttpHeaders(); headers.add("Access-Control-Allow-Origin", "*"); headers.add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT"); headers.add("Access-Control-Allow-Headers", "X-Requested-With,content-type"); headers.add("Access-Control-Allow-Credentials", "true"); return new ResponseEntity(headers, HttpStatus.CREATED); }
  • 试试这样的:this.http.post(ConstantData.loginUrl, {email,password, httpOptions: httpOptions }).toPromise();并尝试捕获您发送到服务器的请求负载。您可以在右键单击 > 检查 > 网络块时找到该有效负载信息。单击登录按钮后,从客户端发送的数据包将显示在此块中。
猜你喜欢
  • 1970-01-01
  • 2019-11-28
  • 1970-01-01
  • 1970-01-01
  • 2022-06-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多