Нарушение CORS с @CrossOrigin, установленным на RestController - PullRequest
Новая
       15

Нарушение CORS с @CrossOrigin, установленным на RestController

0 голосов
/ 16 июня 2020

Доброе утро,

Из того, что я прочитал об ошибках CORS, добавление соответствующей аннотации к вашему контроллеру должно устранить эту ошибку. Эта ошибка не возникает с первыми тремя или последними @GetMapping s. Похоже, эта проблема возникает только в почтовом запросе. Мне гораздо удобнее работать с Java и Spring, чем с React и JavaScript, поэтому я предполагаю, что моя ошибка возникает из-за внешнего кода. Это также может быть проблема с настройками браузера, поскольку вчера я получал ту же ошибку, когда пытался использовать https://jsonplaceholder.typicode.com/posts. Я в растерянности и был бы очень признателен за любую предоставленную помощь.

Я изменил "origin" в моей аннотации @CrossOrigin после нескольких неудач, чтобы проверить, неправильно ли я ее форматировал. Моя серверная часть также хорошо работает с Advanced REST Client, что еще больше наводит меня на мысль, что моя проблема полностью связана с внешним интерфейсом или с тем, как я настроил Chrome.

Вот точный текст ошибки : "Доступ к XMLHttpRequest по адресу 'http://localhost: 8080 / get_jeff / store_interval ' from origin 'http://localhost: 3000 ' заблокирован политикой CORS: Нет 'Access-Control -Allow-Origin 'присутствует на запрошенном ресурсе. "

Вот мой контроллер: 

package getJeff.controllers;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseStatus;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.view.RedirectView;

import getJeff.entities.Name;
import getJeff.entities.Passerby;
import getJeff.services.ActivityService;
import getJeff.services.NameService;
import getJeff.services.PasserbyService;
import getJeff.utils.JSIntervalStorer;
import getJeff.utils.PasserbyGenerator;
import getJeff.utils.PasserbyQuerier;

@RestController
@CrossOrigin(origins = "*", allowedHeaders = "*")
@RequestMapping("/get_jeff")
public class JeffGameController {

    @Autowired
    PasserbyService pasRepo;
    @Autowired
    NameService namRepo;
    @Autowired
    ActivityService actRepo;

    Thread generate;
    PasserbyGenerator pasGenerator;
    PasserbyQuerier pasQuery;
    JSIntervalStorer storer;

    List<Passerby> passers;

    @GetMapping
    public RedirectView jeffGetting() {
        pasGenerator = new PasserbyGenerator(pasRepo, namRepo, actRepo);
        pasQuery = new PasserbyQuerier(pasRepo);
        generate = new Thread(pasGenerator);
        passers = new ArrayList<>();
        generate.start();

        return new RedirectView("/get_jeff/initial_jeffs");
    }

    @GetMapping("/initial_jeffs")
    public List<Passerby> startGettingJeff() {
        passers = pasQuery.initialQuery();
        return passers;
    }

    @GetMapping("/more_jeffs")
    public List<Passerby> keepGettingJeff() {
        passers = pasQuery.subsequentQuery();
        return passers;
    }

    @PostMapping(path = "/store_interval", consumes = MediaType.TEXT_PLAIN_VALUE)
    @ResponseStatus(HttpStatus.CREATED)
    public String postInterval(@RequestBody String interval) {
        storer = new JSIntervalStorer(interval);

        return "";
    }

    @GetMapping(path = "/get_interval")
    @ResponseStatus(HttpStatus.FOUND)
    public long getInterval() {
        return storer.getInterval();
    }

    @SuppressWarnings("deprecation")
    @GetMapping("/stop_jeff")
    public String stop(Model model) {
        generate.stop();

        pasRepo.deleteAll();
        return "";
    }

}

А вот мой компонент-контейнер (он находится в стадии тестирования, так что код довольно грубый): 

import React, { Component, lazy, Suspense } from 'react';

const Passersby = lazy(() => import('../components/Passersby'));
const IntervalStored = lazy(() => import('../utils/IntervalStorer'));

class Public extends Component {

    state = {
        passersby: null
    };

    startJeff = () => {
        this.setState({ passersby: null });
        import('axios').then(axios => {
            axios.get('http://localhost:8080/get_jeff')
        });
        setTimeout(this.stopIt, 10000);
        this.setState({intervalStorer: IntervalStored});
        //remember to call clearTimeout() if defeat conditions are satisfied
        this.checkForJeff();
    }

    checkForJeff = () => {
        if (this.state.passersby === null) {
            this.setState({ passersby: [] });
        }
        this.queryForJeff();
    }

    queryForJeff = () => {
        //set query Interval
    }

    assignJeff = () => {
        import('axios').then(axios => {
            axios.get('http://localhost:8080/get_jeff/more_jeffs')
                .then(response => {
                    const folks = response.data;
                    const updatePassersby = this.state.passersby;
                    updatePassersby.push.apply(updatePassersby, folks);
                    this.setState({ passersby: updatePassersby });
                });
        });
    }

    //this method in particular is the one being tested
    //It is very, very incomplete and the code below is just to test functionality
    postInterval = () => {
        import('axios').then(axios => {
            const theInterval = setInterval(console.log('interval run'), 1000);
            console.log(theInterval);
            axios.post('http://localhost:8080/get_jeff/store_interval', theInterval);
        })
    }

    stopIt = () => {
        import('axios').then(axios => {
            axios.get('http://localhost:8080/get_jeff/stop_jeff')
        });

    }

    render() {

        let people = null;

        if (this.state.passersby) {
            people = (
                <Passersby
                    name={this.state.passersby.name}
                    activity={this.state.passersby.activity}
                    key={this.state.passersby.id}
                    passersby={this.state.passersby}
                />
            )
        }

        return <div>
            <h1>Jeffs?</h1>
            <button onClick={this.startJeff}>Start the Jeffing</button>
            <button onClick={this.checkForJeff}>More Possible Jeffs?</button>
            <button onClick={this.postInterval}>Interval Test</button>
            <button onClick={this.stopIt}>NO MORE JEFFS</button>
            <Suspense fallback={<div>Jeff Could Be Anywhere...</div>}>
                {people}
            </Suspense>
        </div>

    }
}

export default Public;

Я также попытался изменить заголовок своего запроса следующим образом: 

//the same method from above after the changes
postInterval = () => {
    let config = {
        headers: {
            header1: "access!"
        }
    }

    import('axios').then(axios => {
        const theInterval = setInterval(console.log('interval run'), 1000);
        console.log(theInterval);
        const intervalNum = theInterval.valueOf();
        axios.post('http://localhost:8080/get_jeff/store_interval', intervalNum, config);


    })
}

Я также изменил свою аннотацию @CrossOrigin следующим образом: 

@CrossOrigin(origins = "*", allowedHeaders = "access!")

Эти изменения не помогли. Если для понимания и решения проблемы требуется какая-либо другая информация, пожалуйста, дайте мне знать. Проблема исчезнет, ​​если я использую плагин Access-Control-Allow-Origin, но я бы предпочел реальное решение. Спасибо за любую помощь.

...