Question

所以我从反应器请求来自我的流明API的数据我的第一个请求是触发组件挂载并返回数据absolutley罚款，当选择菜单值更改时我发送另一个数据请求，但是这个请求失败了CORS，我不知道理解为什么一个Ajax需要工作而另一个不能工作？

我的流明代码看起来像这样，

$router->group(['prefix' => 'api/v1','namespace' => '\App\Http\Controllers', 'middleware' => 'cors'], function () use ($router)
    {
        // $router->get('authorities','APIController@getLocalAuthorities');
        $router->get('authority-establishments/{id}', 'APIController@getEstablishmentsByLocalAuthorityId');
        $router->get('authorities','APIController@getLocalAuthorities');
    });

像这样的控制器，

<?php

namespace App\Http\Controllers;

use Laravel\Lumen\Routing\Controller as BaseController;
use GuzzleHttp\Exception\GuzzleException;
use GuzzleHttp\Client;
use \App\Authority;
use \App\Establishment;
use \Response;

class APIController extends BaseController
{
    private $client;

    public function __construct() {
        $this->client = new Client([
            'base_uri' => env('FSA_API_ROOT'),
            'headers' => [
                'x-api-version' => env('FSA_API_VERSION')
            ]
        ]);
    }

    public function getLocalAuthorities() {

       //Get the data from the FSA Api
       $api_results = $this->client->get('Authorities/basic');

       $authorityModel = new Authority();

       $parsed_data = $authorityModel->getAuthoritiesFromAPI($api_results->getBody()->getContents());

       return response()->json($parsed_data, 200);

    }

    public function getEstablishmentsByLocalAuthorityId($authority_id) {

        $api_results = $this->client->get("Establishments?localAuthorityId={$authority_id}&page_size=0&page_number=0");
        $establishmentModel = new Establishment();

        $parsed_data = $establishmentModel->aggregateTableData($api_results->getBody()->getContents());

        return response()->json($parsed_data, 200);

    }

}

和我的反应代码，

import React, { Component } from 'react';
import Select from 'react-virtualized-select';
import createFilterOptions from 'react-select-fast-filter-options';
import axios from 'axios';
import ReactTable from 'react-table';
import 'react-select/dist/react-select.css';
import 'react-virtualized/styles.css'
import 'react-virtualized-select/styles.css'
import "react-table/react-table.css";

import './App.css';

class App extends Component {
/* Simple example */

  constructor(props) {
    super(props);
    this.state = {
      authorities:[],
      authoritiesLoading:false,
      establishmentsLoading:false,
      requestError:false,
      tableData:[]
    }

  }
  componentWillMount() {
    let self = this;

    axios.get('http://api.tech.test/api/v1/authorities')
    .then(function (response) {
      self.setState({authorities:response.data});
    })
    .catch(function (error) {
      console.log(error);
    });
  }

  render() {

    const options = this.state.authorities;

    const filterOptions = createFilterOptions([this.state.authorities]);

    return (
      <div className="App">

        <Select
          name="university"
          value="one"
          options={this.state.authorities}
          onChange={val => this.updateTableData(val.value)}
        />

        <ReactTable
        data={this.state.tableData}
          columns={[
            {
              Header: "Rating",
              accessor: "rating"
            },
            {
              Header: "Count",
              accessor: "count"
            },
            {
              Header: "Percentage of Distribution",
              accessor: "percentage"
            }
          ]}/>

      </div>
    );
  }

  updateTableData(authorityId) {
    let self = this;
    axios.get('http://api.tech.test/api/v1/authority-establishments/' + authorityId)
    .then(function (response) {
      alert("done");
      console.log(response.data);
      self.setState({tableData : response.data});
    })
    .catch(function (error) {
      alert(error);
      console.log(error);
    });
  }

}

export default App;

我的/authorities请求是否有效，但我的请求/authority-establishments/{id}会因为不允许原始标题而失败？

流明和反应

0 个答案: