當'Content-Type'設置為'application / json'時，無法發送帖子請求

Question

我正在研究React應用程序，我正在使用fetch來發送請求。 我最近制作了一個Sign Up表單，現在我正在將它與它的API集成。 以前，API接受了url編碼數據，並且一切正常。 但是現在需求已經改變並且API接受JSON中的數據，我不得不將內容類型頭從'application / x-www-form-urlencoded'更改為'application / json'。 但是我收到以下錯誤：

Fetch API無法加載http://local.moberries.com/api/v1/candidate 。 對預檢請求的響應未通過訪問控制檢查：請求的資源上不存在“Access-Control-Allow-Origin”標頭。 因此不允許來源' http：// localhost：3000 '訪問。 如果不透明響應滿足您的需求，請將請求的模式設置為“no-cors”以獲取禁用CORS的資源。

我甚至在API中設置了“Access-Control-Allow-Headers”，但它仍然無效。 以下是客戶端的相關代碼：

sendFormData() {
    let {user} = this.props;

    var formData = {
      first_name: ReactDOM.findDOMNode(this.refs.firstName).value,
      last_name: ReactDOM.findDOMNode(this.refs.lastName).value,
      city: ReactDOM.findDOMNode(this.refs.currentCity).value,
      country: ReactDOM.findDOMNode(this.refs.currentCountry).value,
      is_willing_to_relocate: user.selectedOption,
      cities: relocateTo,
      professions: opportunity,
      skills: skills,
      languages: language,
      min_gross_salary: minSal,
      max_gross_salary: maxSal,
      email: ReactDOM.findDOMNode(this.refs.email).value,
      password: ReactDOM.findDOMNode(this.refs.password).value
    };

    var request = new Request('http://local.moberries.com/api/v1/candidate', {
      method: 'POST',
      mode: 'cors',
      headers: new Headers({
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      })
    });

    var requestBody = JSON.stringify(formData);

    console.log(requestBody);

    fetch(request, {body: requestBody})
      .then(
        function (response) {
          if (response.status == 200 || response.status == 201) {
            return response.json();
          } else {
            console.log('Failure!', response.status);
          }
        }).then(function (json) {

      var responseBody = json;

      console.log(typeof responseBody, responseBody);
    });

  }

以下是相關的API代碼：

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers: Origin, Content-Type, application/json');
    }
}

我真的無法弄清楚問題。 任何形式的幫助將不勝感激。

Answer 1

事實證明，CORS只允許某些特定的內容類型。

Content-Type標頭唯一允許的值是：

• 應用程序/ x-WWW窗體-urlencoded
• 多部分/格式數據
• 純文本/

來源： https ： //developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

要將內容類型設置為“application / json”，我必須在API中設置自定義內容類型標頭。 剛刪除了最后一個標題並添加了這個標題：

->header('Access-Control-Allow-Headers', 'Content-Type');

它運作良好。

Answer 2

您違反了“ 同源政策 ”。 網站www.example.com可能永遠無法從任何網站www.example.net加載資源而非自身。

然而，在開發過程中，有時需要能夠做到這一點。 繞過這個：

1. 要么將你的起源移到http://local.moberries.com ，
2. 或將api（您正在訪問的）移動到您的localhost。
3. 除此之外，還有一些方法可以在某些瀏覽器（特別是Chrome）中臨時關閉這些類型的限制，這些方法通常需要在瀏覽器的后續更新中付出更多努力。 在Google上搜索有關如何在您的瀏覽器版本中啟用跨源資源共享的信息。
4. 或者，如錯誤提示所示，引入一個標題，允許從非來源接受請求。 有關Access Control CORS的文檔中提供了更多信息