javascript - POST 请求在 Phoenix 变成 200 OPTIONS 但不发送以下 POST

Question

我正在使用 Angular 2 和 Phoenix，并且正在尝试向 Phoenix 发送 POST 请求。我有以下代码:

端点.ex

plug Corsica, origins: "http://localhost", allow_headers: ["content-type"]

在我的前端我有

@Injectable()
export class RegisterService {

    public headers: Headers;

    constructor(private _http: Http) {
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
    }

    createUser(): Observable<Response> {
        return this._http.post(
            'http://localhost:4000/v1/users', 
            JSON.stringify({
                firstName: 'lll',
                lastName: 'xxxxx',
                email: 'dddd@gmail.com',
                password: 'test123'
            }), 
            {headers: this.headers}
        );
    }
}

这是组件代码

createUser(): void {
    this._registerService.createUser().subscribe();
}

我收到 200 OK OPTIONS 但它从不发送 POST 请求。

一般

Request URL:http://localhost:4000/v1/users
Request Method:OPTIONS
Status Code:200 OK
Remote Address:127.0.0.1:4000
Referrer Policy:no-referrer-when-downgrade

响应 header

cache-control:max-age=0, private, must-revalidate
content-length:0
date:Sat, 10 Jun 2017 04:29:50 GMT
server:Cowboy
x-request-id:hfm969svbqv9oa2jatn5ri641srsht3s

请求 header

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:localhost:4000
Origin:http://localhost:4200
Referer:http://localhost:4200/signup

我的 Phoenix 日志只是说

[info] OPTIONS /v1/users
[info] Sent 200 in 31µs

不知道我做错了什么。我确实稍微修改了我的 router.ex...虽然不确定它是否会产生任何影响，但它是

defmodule Api.Router do
  use Api.Web, :router

  pipeline :api do
    plug :accepts, ["json"]
  end

  scope "/", Api do
    pipe_through :api

    resources "/organizations", OrganizationController
  end

  scope "/v1", Api.V1, as: :v1 do
    pipe_through :api

    resources "/users", UserController, only: [:create, :show, :update]
  end
end

Answer 1

您需要配置 http://localhost:4000/v1/users 路由来发送包含 Access-Control-Allow-Origin 响应 header 的响应，并且还包括值中包含字符串“Content-Type”的 Access-Control-Allow-Headers 响应 header ，以及 Access-Control-Allow -Methods 响应 header ，值中包含字符串 POST。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS详细解释一下。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests解释了浏览器发送 OPTIONS 请求的原因，以及浏览器需要什么响应。

I get a 200 OK OPTIONS but it never sends the POST request.

这是因为如果 OPTIONS 响应不包含 Access-Control-Allow-Origin header 和 Access-Control-Allow-Headers code> 和 Access-Control-Allow-Methods header (其值如上所述)，然后浏览器就在那里停止并且永远不会发送 POST。