Question

每当我在react JS的搜索表单上提交关键字时，我都试图访问我的twitter api。通过API提取推文的spring boot代码正在运行，我可以在URL http://localhost:8081/trend/twitter?keyword=selena上访问它现在，我尝试将这个API连接到我的react JS表单上，这样，当我在react上搜索关键字时，它将通过此API调用访问twitter并显示结果。从早上开始，我一直在浏览在线代码，我一直在尝试所有建议，但到目前为止没有任何进展。

我在控制台上收到此错误消息

无法加载资源：服务器响应状态为403（）     twitter：1已被CORS策略阻止从原点“ http://localhost:8081/trend/twitter?keyword=douglas”到“ http://localhost:3000”的访存：所请求的资源上没有“ Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”以在禁用CORS的情况下获取资源。

Spring Boot Code

@RestController
@RequestMapping("/trend")
public class TwitterController {
    private TwitterService twitterService = new TwitterService();

    // Get all tweets by keyword
    @GetMapping("/twitter")
    @CrossOrigin(origins = "http://localhost:3000/")

    public List<Tweet> getTweets(@RequestParam("keyword") String keyword) {
        return twitterService.getTweets(keyword);
    }

ReactJS代码

class App extends Component {

  getTrend = async (e) => {
    e.preventDefault();

    const keyword = e.target.elements.keyword.value;

    const api_call = await fetch(`http://localhost:8081/trend/twitter?keyword=${keyword}`); //make API call

    // axios.get('http://localhost:8081/trend/twitter?keyword=${keyword}')
    //.then((res) => {
      console.log(api_call);
   // });
  }

  render() {
    return (
      <div>
          <div class="col-sm-9">
            <SearchEngine getTrend={this.getTrend} />
          </div> 
      </div>
    );
  }
}

export default App;

Answer 1

您尝试在http://localhost:3000/上启用CORS，但需要http://localhost:8081

如何在React JS上访问Spring Boot API

1 个答案: