json - opaque - react fetch post

No se puede enviar una solicitud posterior cuando el ''Tipo de contenido'' está configurado en ''application/json''

Question

Estoy trabajando en una aplicación de React y estoy usando fetch para enviar una solicitud. Recientemente hice un formulario de registro y ahora lo estoy integrando con su API. Anteriormente, la API aceptaba datos codificados en url y todo funcionaba bien. pero ahora que el requisito ha cambiado y la API acepta datos en JSON, tuve que cambiar el encabezado de tipo de contenido de ''application / x-www-form-urlencoded'' a ''application / json''. Pero me sale el siguiente error:

Fetch API no puede cargar http://local.moberries.com/api/v1/candidate . La respuesta a la solicitud de verificación previa no pasa la comprobación de control de acceso: No hay encabezado ''Access-Control-Allow-Origin'' presente en el recurso solicitado. El origen '' http: // localhost: 3000 '' no está, por lo tanto, permitido. Si una respuesta opaca satisface sus necesidades, establezca el modo de solicitud en ''no-cors'' para recuperar el recurso con CORS deshabilitado.

Incluso he configurado ''Access-Control-Allow-Headers'' en la API, pero todavía no funciona. Aquí está el código relevante para el lado del cliente:

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

  }

Y aquí está el código API relevante:

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

Realmente no puedo entender el problema. Cualquier tipo de ayuda será apreciada.

Answer 1

Resulta que CORS solo permite algunos tipos de contenido específicos.

Los únicos valores permitidos para el encabezado Content-Type son:

• application / x-www-form-urlencoded
• multipart / form-data
• Texto sin formato

Fuente: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Para establecer el tipo de contenido como ''application / json'', tuve que establecer un encabezado de tipo de contenido personalizado en la API. Acabo de eliminar el último encabezado y agregué este:

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

y está funcionando todo bien.

Answer 2

Usted está violando la '' Política de Mismo Origen ''. Es posible que un sitio web www.example.com nunca pueda cargar recursos desde ningún sitio web www.example.net que no sea desde sí mismo.

Sin embargo, durante el desarrollo, a veces es necesario poder hacer eso. Para eludir esto:

1. mueva su origen a http://local.moberries.com ,
2. o mueva la API (a la que está accediendo) a su servidor local.
3. Aparte de eso, hay formas de desactivar temporalmente las restricciones de este tipo en algunos navegadores (especialmente Chrome), métodos de los cuales generalmente requieren más y más esfuerzo en las actualizaciones posteriores del navegador. Busque en Google sobre cómo activar Compartir recursos entre orígenes en su versión del navegador.
4. O, como sugiere el mensaje de error, introduzca un encabezado que permita entretener a las solicitudes desde los no orígenes. Puede encontrar más información en la documentación de Control de acceso CORS