POST 请求在 Phoenix 中变为 200 OPTIONS 但未发送以下 POST

Posted 2023-03-04

【中文标题】POST 请求在 Phoenix 中变为 200 OPTIONS 但未发送以下 POST

【英文标题】：POST Request is turning to 200 OPTIONS in Phoenix but not sending the following POST

【发布时间】：2017-11-12 04:01:26

【问题描述】：

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

endpoint.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: '[e-mail]',
                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

响应标头

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

请求标头

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

我的凤凰日志只是说

[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

【问题讨论】：

你是 subscribing 到 createUser() 方法。用组件代码更新帖子。

@Aravind 已更新，是的，我正在调用它。

plug Corsica 是否高于plug MyApp.Router？您可以尝试暂时将origins 更改为"*" 看看是否可以解决此问题？

@Dogbert 是的，plug Corsica 在 plug 之上，我将其更改为“*”，它似乎工作......它现在正在发送 POST 请求！！！！不过，在那张纸条上，当我使用我的 chrome 开发工具时，怎么会同时看到 OPTIONS 和 POST 请求？我以前从未见过。

你可以试试origins: "http://localhost:4200" 一次吗？有用吗？

【参考方案1】：

origins 值与 origin 标头完全匹配。您的请求正在发送原始值 http://localhost:4200，而您只允许 http://localhost。如果要允许来自http://localhost:4200 的请求，则需要将origins 更改为http://localhost:4200：

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

【讨论】：

你知道为什么它还在发送 200 OPTIONS 响应吗？但不是帖子？我觉得如果 200 OPTIONS 失败会更合理。

@LukeXu @sideshowbarker 在他们回答的最后解释了这一点，比我做得更好。 :)

【参考方案2】：

您需要配置http://localhost:4000/v1/users 路由以发送包含Access-Control-Allow-Origin 响应标头的响应，并且还包含带有字符串“Content-Type”的Access-Control-Allow-Headers 响应标头和@987654327 @response 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 请求，以及浏览器需要什么响应。

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

这是因为如果OPTIONS 响应不包含Access-Control-Allow-Origin 标头以及Access-Control-Allow-Headers 和Access-Control-Allow-Methods 标头（具有如上所述的值），则浏览器会停在那里并且永远不会发送@987654334 @。