使用Flask和Nextjs的CORS问题

t1qtbnec  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(150)

解决方案

请参见******之间的代码!
后端-app.py:

  1. from flask_cors import CORS
  2. app = Flask(__name__)
  3. ***CORS(app, support_credentials=True)***
  4. @app.route('/api/start', methods=['POST'])
  5. ***@cross_origin(supports_credentials=True)***
  6. def dostuff_endpoint():
  7. global doingstuff_active
  8. if request.method == 'POST':
  9. if not doingstuff_active:
  10. doingstuff_active = True
  11. return 'Doingstuff activated.'
  12. else:
  13. return 'Doingstuff already active.'
  14. else:
  15. return 'Invalid request method.'
  16. // Some code
  17. if __name__ == '__main__':
  18. // Some code
  19. ***app.run(host='127.0.0.1', port=5000)***

前端- startButton.tsx:

  1. 'use client'
  2. import { useEffect, useState } from 'react';
  3. import axios from 'axios';
  4. const StartButton = () => {
  5. const [data, setData] = useState('');
  6. const fetchData = async () => {
  7. try {
  8. const response = await axios.get('http://**127.0.0.1**:5000/api/dothat');
  9. const newEntry = response.data.new_entry;
  10. setData(newEntry || '');
  11. } catch (error) {
  12. console.log(error);
  13. }
  14. };
  15. const handleClick = async () => {
  16. try {
  17. await axios.post('http://***127.0.0.1***:5000/api/dothing');
  18. fetchData();
  19. } catch (error) {
  20. console.log(error);
  21. }
  22. };
  23. return (
  24. <div>
  25. <button onClick={handleClick}>Start</button>
  26. <p>{data}</p>
  27. </div>
  28. );
  29. };
  30. export default StartButton;

有许多与CORS相关的问题和解决方案,但在尝试了上述解决方案后,我仍然有问题。我将在本地运行这个应用程序,所以我不认为CORS是一个问题。有人能给我指个方向吗?TY!
我不想通过代理运行请求。
我尝试了以下提到的解决方案:(1)CORS error when making network call in useEffect in Next.Js,(2)Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?
CORS错误消息:
CORS策略阻止了从源“http://localhost:5000/api/start”访问XMLHttpRequest:请求的资源上不存在“Access-Control-Allow-Origin”标头。
后端-app.py:

  1. from flask_cors import CORS
  2. app = Flask(__name__)
  3. CORS(app)
  4. @app.route('/api/start', methods=['POST'])
  5. def dostuff_endpoint():
  6. global doingstuff_active
  7. if request.method == 'POST':
  8. if not doingstuff_active:
  9. doingstuff_active = True
  10. return 'Doingstuff activated.'
  11. else:
  12. return 'Doingstuff already active.'
  13. else:
  14. return 'Invalid request method.'
  15. // Some code
  16. if __name__ == '__main__':
  17. // Some code
  18. app.run()

前端- startButton.tsx:

  1. 'use client'
  2. import { useEffect, useState } from 'react';
  3. import axios from 'axios';
  4. const StartButton = () => {
  5. const [data, setData] = useState('');
  6. const fetchData = async () => {
  7. try {
  8. const response = await axios.get('http://localhost:5000/api/dothat');
  9. const newEntry = response.data.new_entry;
  10. setData(newEntry || '');
  11. } catch (error) {
  12. console.log(error);
  13. }
  14. };
  15. const handleClick = async () => {
  16. try {
  17. await axios.post('http://localhost:5000/api/dothing');
  18. fetchData();
  19. } catch (error) {
  20. console.log(error);
  21. }
  22. };
  23. return (
  24. <div>
  25. <button onClick={handleClick}>Start</button>
  26. <p>{data}</p>
  27. </div>
  28. );
  29. };
  30. export default StartButton;

相关问题