'Content-Type'設置爲'application/json'時無法發送發佈請求

我正在使用React應用程序，並使用提取發送請求。我最近做了一個註冊表單，現在我正在將它與它的API進行整合。以前API接受的URL編碼數據，它都工作正常。但現在需求已經改變，API以JSON接受數據，我不得不將內容類型的頭從'application/x-www-form-urlencoded'改爲'application/json'。但我得到以下錯誤：'Content-Type'設置爲'application/json'時無法發送發佈請求

Fetch API cannot load http://local.moberries.com/api/v1/candidate . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3000 ' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我甚至設置的訪問控制允許報頭'的API中，但它仍然無法正常工作。下面是客戶端的相關代碼：

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'); 
    } 
}

我真的想不通的問題。任何形式的幫助將不勝感激。

來源

2016-08-17 Arslan Tariq

http://local.moberries.com/api/v1/candidate無法訪問 –

因爲它是本地的。您無法訪問它。 –

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

The only allowed values for the Content-Type header are:

application/x-www-form-urlencoded

multipart/form-data

text/plain

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

若要將內容類型設置爲「應用/ JSON」，我必須設置在API中一個自定義的內容類型報頭。剛剛刪除最後一個標題，並添加了這一個：

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

它工作都很好。

來源

2016-08-18 07:35:12

在我的情況下，我不得不將'Content-Type'改爲'text/plain'以使其工作。將這些標頭添加到服務器端的API響應中並沒有幫助。我正在使用IBM WAS 8559.它的API似乎無法爲CORS預查詢請求中使用的「OPTIONS」方法提供所需的響應頭。 –

您正在違反'Same Origin Policy'。網站www.example.com可能永遠無法從任何網站www.example.net加載資源，除非它本身。

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

或者將您的原點http://local.moberries.com，
或移動API（您正在訪問）到localhost。
除此之外，有些方法可以在某些瀏覽器（特別是Chrome）中臨時關閉這些類型的限制，其方法在瀏覽器的後續更新中通常需要越來越多的努力。搜索Google關於如何在您的瀏覽器版本中啓用跨源資源共享。
或者，如錯誤提示所示，引入一個標頭，允許從非來源接收請求。更多的信息在the documentation for Access Control CORS

來源

2016-08-18 03:46:22

'Content-Type'設置爲'application/json'時無法發送發佈請求

回答

相關問題