Arduino - React.js 웹서버 연결 시 CORS 문제사항 및 연결 불가

Question

현재 LOLIN(WEMOS) D1 R2 & mini라는 ESP8266 내장형 보드를 이용해 웹 서버 통신을 하여 React.js로 넘겨 React.js에서 이를 표시하는 것을 시도중인 학생입니다.처음에 CORS 오류가 뜨길래 아두이노 코드에 CORS를 해결하는 코드를 작성하였고 해보니 그대로입니다.React 측에서 package.json에 proxy : "아두이노 주소"도 추가해봤지만 소용이 없었습니다.밑에 코드를 올려둘테니 혹시 이 문제의 해결 방법을 아시는 분은 답글 부탁드립니다. ㅠㅠ아두이노#include #include const char* ssid = "와이파이"; // 사용 중인 와이파이 이름 const char* password = "비번"; // 와이파이 패스워드 ESP8266WebServer server(80); void setup() { Serial.begin(115200); // 무선 네트워크 연결 WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); server.on("/arduino-data", HTTP_OPTIONS, handleOptions); // CORS 옵션 요청 처리 server.on("/arduino-data", HTTP_GET, handleEndpoint); // 엔드포인트 설정 // 서버 시작 server.begin(); Serial.println("HTTP server started"); Serial.print("Local IP address: "); Serial.println(WiFi.localIP()); } void loop() { server.handleClient(); handleOptions(); handleEndpoint(); } void handleOptions() { // CORS 설정 server.sendHeader("Access-Control-Allow-Origin", "*"); server.sendHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); server.sendHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); server.send(200); } void handleEndpoint() { // 클라이언트에 응답할 데이터 생성 String data = "This is data from Arduino!"; // 클라이언트에 데이터 전송 server.send(200, "text/plain", data); }React - App.jsimport React from 'react'; import ArduinoCommunication from './ArduinoCommunication'; function App() { return (

); } export default App; React - ArduinoCommuicationimport React, { Component } from 'react'; import axios from 'axios'; const arduinoServerUrl = 'http://아두이노 IP 주소'; const arduinoDataEndpoint = '/arduino-data'; class ArduinoCommunication extends Component { constructor(props) { super(props); this.state = { arduinoData: 'NA', }; } componentDidMount() { this.getDataFromArduino(); } getDataFromArduino = () => { axios.get(`${arduinoServerUrl}${arduinoDataEndpoint}`) .then((response) => { this.setState({ arduinoData: response.data }); }) .catch((error) => { console.error('Error fetching data:', error); }); }; render() { return (

Data from Arduino:{this.state.arduinoData}

); } } export default ArduinoCommunication;

Clickin · Accepted Answer

https://arduino.stackexchange.com/questions/58457/how-to-allow-cross-domain-requests-on-esp8266webserverEDIT: since 2020, the library has server.enableCORS(true);enableCORS로 해결이 되는지 한번 테스트해보실까요

parkss · Answer

프록시 추가하셨으면 호스트 주소 빼고 한번 해보시지요

Arduino - React.js 웹서버 연결 시 CORS 문제사항 및 연결 불가

2개의 답변

Q&A 목록