React with Redux Axios get request error issue with laravel 5.2 api server答案

【问题标题】：React with Redux Axios get request error issue with laravel 5.2 api serverReact with Redux Axios get request error issue with laravel 5.2 api server
【发布时间】：2016-08-10 15:40:40
【问题描述】：

我正在使用 react with redux 和 axios 进行异步操作。以及用于后端的 laravel 5.2 api。 React 在实际域中，而 api 在子域中。当我尝试向 api 调用异步获取请求时，我从网络收到 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})
          });
    }
}

【问题讨论】：

标签： javascript reactjs laravel-5.2 react-redux axios

【解决方案1】：

问题是服务器没有返回Access-Control-Allow-Origin 标头。

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

请注意Access-Control-Allow-Origin是一个响应头，所以你不应该将它添加到axios请求配置中。

【讨论】：