3

非同期アクションにreact with reduxとaxiosを使用しています。バックエンド用のlaravel 5.2 API。React は実際のドメインにあり、API はサブドメインにあります。API に対して async get リクエストを呼び出そうとすると、ネットワークから 200 Ok を取得していますが、コンソールでエラーが発生しています。

コンソールログ:

XMLHttpRequest はhttp://api.doublecurlybraces.me/api/test?api_token=inpm38XbI9Fof7CZv99VlfNQTjx02EjaL5V1B3###########を読み込めません 。プリフライト要求への応答がアクセス制御チェックに合格しません: 要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。したがって、オリジン ' http://doublecurlybraces.me ' へのアクセスは許可されていません。

Network : 
--General--
Request Method:OPTIONS
Status Code:200 OK
Remote Address:46.101.###.###:80
----
--Response Header--
Allow:GET,HEAD,POST
Cache-Control:no-cache
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=UTF-8
Date:Wed, 10 Aug 2016 15:08:01 GMT
Server:nginx/1.11.1
Transfer-Encoding:chunked
--Request Header--
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, access-control-allow-headers, access-control-allow-origin, x-requested-with
Access-Control-Request-Method:GET
Cache-Control:max-age=0
Connection:keep-alive
Host:api.doublecurlybraces.me
Origin:http://doublecurlybraces.me
Referer:http://doublecurlybraces.me/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36
#

アクションコード

import axios from "axios";

var config = {
       headers: {
             'Content-Type': 'application/json',
             'Access-Control-Allow-Headers':'*',
             'Access-Control-Allow-Origin' : 'http://doublecurlybraces.me',
             'X-Requested-With': 'XMLHttpRequest'
       },
       params: {
             api_token : 'inpm38XbI9Fof7CZv99VlfNQTjx02EjaL#############',

       },

};

export function stockChanges(){

    return function(dispatch){
        axios.get('http://api.doublecurlybraces.me/api/test',config)
          .then(function (response) {
            dispatch({type : "FETCH_STOCK_FULFILLED" , payload : response.data})
          })
          .catch(function (error) {
            dispatch({type : "FETCH_STOCK_REJECTED" , payload : error})
          });
    }
}
4

1 に答える 1

1

Access-Control-Allow-Origin問題は、サーバーがヘッダーを返さないことです。

Access-Control-Allow-Origin: http://doublecurlybraces.me

Access-Control-Allow-Originは応答ヘッダーであるため、axios 要求構成に追加しないでください。

于 2016-08-10T17:30:14.433 に答える