1

描述：

我正在使用LexikJWTAuthenticationBundle并尝试使用从 Ionic2 应用程序发送的凭据生成 JWT 令牌。

使用 Curl 和 Postman 生成令牌可以正常工作。

curl -X POST http://localhost:8000/api/login_check -d _username=root -d _password=root

但是，Ionic2 在实际发送带有凭据的 POST 请求之前会发送一个预检 OPTIONS 请求。这被 Symfony3 误解并返回 404。

来自 Ionic2 的控制台错误：

选项http://localhost:8000/api/login_check 404（未找到） XMLHttpRequest 无法加载http://localhost:8000/api/login_check。

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源“ http://localhost:8100 ”。响应具有 HTTP 状态代码 404。

0 - {"isTrusted":true}

例外：0 - {"isTrusted":true}

问题：

我必须在我的 Symfony3 应用程序中更改什么（可能在我的 routing.yml 或 security.yml 中）才能不发回 404？

代码：

Ionic2 HttpService：

 @Injectable()
 export class HttpService {

  private baseUrl: string = "http://localhost:8000";

  constructor(private http: Http){

  }

  public create<T>(url: string, extractData, data: any = null): Observable<Array<T>>{

    let headers = new Headers({ 'Content-Type': 'application/json'});
    let options = new RequestOptions({ headers: headers });

    return this.http
      .post(this.baseUrl + url, data, options)
      .map(extractData)
      .catch(this.handleError)
  }
  //More methods here...
 }

Symfony 路由.yml：

api_login_check:
    path: /api/login_check
    # This line is something I added to see if OPTIONS would work
    # However, it did not work.
    methods:  [POST, OPTIONS]

类似问题：

Symfony2 JWT 身份验证在预检时返回 404

4

2 回答 2

1

查看https://github.com/nelmio/NelmioCorsBundle以查看相应的标题。服务器需要使用适当的 Access-Control-Allow 源响应标头进行响应，例如：

访问控制允许来源：http://localhost:8100

允许请求成功。

有关 CORS 行为的更多信息：https: //www.moesif.com/blog/technical/cors/Authoritative-Guide-to-CORS-Cross-Origin-Resource-Sharing-for-REST-APIs/

于 2017-01-20T23:18:52.440 回答
1

解释：

因此，经过一整天对这个问题的思考，我找到了解决方案。虽然可以合并NelmioCorsBundle（不确定它是否支持 Symfony3），但我觉得绕过 Cors 问题有点过头了。

在现实世界的电话应用程序中，不会发送 OPTIONS 预检请求。这只发生在ionic serve（据我了解）。

这个想法是为 Ionic2 设置一个代理服务器。说起来容易做起来难。似乎有很多关于它的问题。我已经能够让它工作了。

解决方案：

ionic.config.jsonIonic2 项目的根目录下应该有一个。您只需要添加几行：

{
  "name": "websurgapp",
  "app_id": "",
  "v2": true,
  "typescript": true,
  //This is what I added.
  "proxies": [{
    "path": "*/api", //<- NOTICE THE */ !
    "proxyUrl": "http://localhost:8000/api"
  }]
}

然后像这样简单地发送请求：

服务：

@Injectable()
export class HttpService {http://localhost:8000;
  constructor(private http: Http){
  }
  public create<T>(url: string, data: any = null, contentType: string = 'application/json'): Observable<Array<T>>{
    let headers = new Headers({ 'Content-Type': contentType});
    let options = new RequestOptions({ headers: headers });
    console.log(data);
    return this.http
      .post(url, data, options)
      .map((res:Response)=>res.json())
      .catch(this.handleError)
  }
}

认证服务：

@Injectable()
export class AuthService {
  constructor(public httpService: HttpService) {
    console.log('Hello AuthService Provider');
  }
  private currentUser: User;
  public login(credentials): any {
    console.log("Login called.");
    //TODO: Upgrade symfony to 3.3 to be able to use JSON.
    let body = new URLSearchParams();
    body.append('_username', credentials._username);
    body.append('_password', credentials._password);
    let result = this.httpService.create("/api/login_check", body, 'application/x-www-form-urlencoded');
    return result;
  }
 }

请注意，我的请求中没有发送 JSON。捆绑包目前不支持它。但是，symfony 3.3 版。（我在 3.1。）确实支持它。

分解它：

  1. 我的 symfony 应用程序运行在http://localhost:8000
  2. 我的 Ionic 2 应用程序在http://localhost:8100
"path": "*/api"

简单地说，我们发送的任何请求中碰巧有一个“/api/”都将被转换为proxyUrl。

例如，要生成令牌，我需要将我的凭据发送到"/api/login_check".

我以前尝试过的：

我之前一直在向 发送请求http://localhost:8000/api/login_check，这当然会发送一个预检 OPTIONS 请求，导致一大堆错误。

然后我尝试简单地指定“/api/login_check”，但http请求会添加"http://localhost:8100"infront..我的应用程序向自己发送请求..这当然不起作用。

解决方案说明：

代理服务器启动后，我只需发送一个请求，前面没有任何内容，它会作为一个没有任何"/api/login_check"内容的 symfony3 应用程序发送到我的 symfony3 应用程序POST requestpreflight OPTIONS request.

于 2017-01-21T10:40:32.533 回答