We Keep Coding

Weird Axios Network Error with seemingly error-free code

I am trying to use react to get data from an API (Python, I'm hosting it on the same machine).
API Code:
from flask import Flask, jsonify, request
app = Flask(__name__)
#app.route('/')
def all_data():
all_data = "Hello"
return jsonify({
'data':all_data,
'message':"success"
}), 200
if __name__ == "__main__":
app.run(debug=True)
React code(Didn't include the render()):
export default class HomeScreen extends Component {
constructor(props){
super(props);
this.state = {
listData:[],
url:"http://localhost:5000"
}
}
getPlanets=()=>{
console.log("Axios called")
const url = this.state.url;
console.log(url)
axios.get(url).then((response)=>{
console.log(response.data)
return this.setState({listData:response.data})
}).catch((error)=>{
console.log(error.message)
Alert.alert(error.message);
})
}
componentDidMount(){
this.getPlanets();
}
}
I'm always getting Network Error for the console.log(error.message).
I'm also getting a larger Error: "Network Error" in Error: Network Error << at e.exports (axios.js:3:7286) << at d.onerror (axios.js:3:6270) for console.log(error).
Simultaneously, I got two weird error messages in my API:
code 400, message Bad request version ('localhost\x00\x17\x00\x00ÿ\x01\x00\x01\x00\x00')
"▬♥☺☻☺☺ü♥♥ÆuaTÁS¾eài ¸ ²`½‼/cùCf{&*½(¨qh↓(â®z↨Ó ×D ÚÚ‼☺‼☻‼♥À+À/À,À0̨̩À‼À¶úú♫♀ l
ocalhost↨ÿ☺☺" HTTPStatus.BAD_REQUEST -
Help?
I've tried looking through a lot of websites for the problem, but they all just suggested adding the http:// prefix to my url, which I had already done. I'm also using Python for the API and not NodeJS, so I don't need to use CORS. I just couldn't find a relevant fix anywhere.

python service access to ajax call , CORS error

I'm getting lost with this problem,
i have a service written in python that i need to access from a web page with an ajax call
the python code is as follows:
import flask
from flask import request, jsonify, make_response
from flask_cors import CORS, cross_origin
from datetime import datetime, timedelta
app = flask.Flask(__name__)
app.run(host='0.0.0.0', port=5000)
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'
#app.route('/api/v1/resources/device/all', methods=['GET'])
#cross_origin()
def api_all():
[...]
response = jsonify(result)
response.headers.add("Access-Control-Allow-Origin", "*")
return response,status_code
and the ajax call is:
$.ajax({
type: 'get',
crossDomain: true,
dataType: "json",
url: AddressWS + '/api/v1/resources/device/all?type=A',
success: function (result) {
//.,...
}
});
The error is ever
... has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource.
the web application is under IIS .
the question is :
if I set 0.0.0.0 as address in python script, which address should I call in the web application ?
i try to machine ipv4 address but don't run.
how i fix the cors problem, i seem to have correctly included the flask libraries.
Thanks everyone for the kind replies

CORS is not configured properly in your code. Please find below the code with the correct CORS configuration.
import flask
from flask import request, jsonify, make_response
from flask_cors import CORS
from flask_restful import Api
from datetime import datetime, timedelta
app = flask.Flask(__name__)
api = Api(app)
CORS(app)
#app.route('/api/v1/resources/device/all', methods=['GET'])
def api_all():
[...]
response = jsonify(result)
status_code = 'some code'
return response,status_code
if __name__ == '__main__':
app.run()

Try this in my case it works ,
$.ajax({
type: 'get',
dataType: 'json',
url: AddressWS + '/api/v1/resources/device/all?type=A',
cors: true,
contentType: 'application/json;charset=UTF-8',
secure: true,
headers: {
'Access-Control-Allow-Origin': '*',
},
success: function (result) {
//.,...
},
error: function (errorMessage) {
console.log('error');
}
});

Post request from react to flask

I am trying to send a post request from react to flask using the following code:
function App() {
const [currentTime, setCurrentTime] = useState(0);
const [accessToken, setAccessToken] = useState(null);
const clicked = 'clicked';
useEffect(() => {
fetch('/time').then(res => res.json()).then(data => {
setCurrentTime(data.time);
});
}, []);
useEffect(() => {
// POST request using fetch inside useEffect React hook
const requestOptions = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title: 'React Hooks POST Request Example',action: 'clicked' })
};
var myParams = {
data: requestOptions
}
fetch('http://127.0.0.1:5000/login', myParams)
.then(response => response.json())
.then(data => setAccessToken(data.access_token));
// empty dependency array means this effect will only run once (like componentDidMount in classes)
}, []);
return (
<div className="App">
<div className="leftPane">
<div className="joyStick" >
<Joystick size={300} baseColor="gray" stickColor="black" ></Joystick>
</div>
<p>The current time is {currentTime}.</p>
<p>The access token is {accessToken}.</p>
</div>
And the flask code is
from __future__ import print_function
from flask import Flask, jsonify, request
from flask_cors import CORS
import time
from flask import Flask
import sys
robotIP="10.7.4.109"
PORT=9559
app = Flask(__name__)
access_token='a'
action="d"
#app.route('/time')
def get_current_time():
return {'time': time.time()}
#app.route('/login', methods=['POST'])
def nao():
nao_json = request.get_json()
if not nao_json:
return jsonify({'msg': 'Missing JSON'}), 400
action = nao_json.get('action')
access_token= action+'s'
print(access_token, file=sys.stderr)
return jsonify({'access_token': access_token}), 200
But every time I run both them both, I get the 'msg': 'Missing JSON' message I have defined and the data from react is never available in flask,even though the get request works.I am not sure what I am doing wrong here.

The problem actually is that this is a cross origin request which must be allowed by the server.
Place this function on your Python code:
#app.after_request
def set_headers(response):
response.headers["Access-Control-Allow-Origin"] = "*"
response.headers["Access-Control-Allow-Headers"] = "*"
response.headers["Access-Control-Allow-Methods"] = "*"
return response
Note:
If react is served from the same server this won't be necessary.
You should set the value of these headers to be as strict as possible on production. The above example is too permissive.
You could serve your React aplication from Flask, thus not requiring these headers to be set. You could use something like this to serve the main react file:
#app.route('/', defaults={'path': ''})
#app.route('/<string:path>')
#app.route('/<path:path>')
def index(path: str):
current_app.logger.debug(path)
return bp_main.send_static_file('path/to/dist/index.html')
Where path/to/dist/index.html would be on the static folder.
See more at:
MDN Web docs
Stackoverflow: How to enable CORS in flask
Stackoverflow: Catch all routes for Flask

No 'Access-Control-Allow-Origin' header is present on the requested resource (FLASK API / ReactJs)

I'm implementing a vegetable retail price predicting web application for one of my university projects using Flask and ReactJs. My POST requests work fine on Postman, but when I try to use a form in ReactJs to make a POST request, I get the following error:
Access to fetch at 'http://127.0.0.1:5000/vegetable' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
api_calls.js:7 POST http://127.0.0.1:5000/vegetable net::ERR_FAILED
Uncaught (in promise) TypeError: Cannot read property 'predicted_retail_price' of undefined
at Pricing.jsx:102
TypeError: Failed to fetch api_calls.js:22
API Results:::: undefined Pricing.jsx:101
But I have added following code segment in my server.py:
from flask import Flask, jsonify
from routes.lstm_price_route import lstm_price_blueprint
from routes.lstm_route import lstm_blueprint
from flask_cors import CORS, cross_origin
import csv
import json
server = Flask(__name__)
CORS(server)
server.config.from_object('config')
server.config['JSON_AS_ASCII'] = False
server.config['CORS_HEADERS'] = 'Content-Type'
server.register_blueprint(lstm_blueprint)
server.register_blueprint(lstm_price_blueprint)
The method in my Flask app(lstm_price_model.py):
def get_tomato_prediction(self, centre_name, date):
Data = pd.read_csv('lstm_price_prediction_tomato.csv')
result = {
'predicted_retail_price': Data.loc[(Data['centre_name'] == centre_name) & (Data['date'] == date), 'predicted_retail_price'].values[0]}
return jsonify(result)
The fetch call in React.js app(api_calls.js):
export const getPredictedPrice = async (centreName, pDate, vegetable) => {
try {
let price_prediction = await fetch(
`${BASE_URL}/vegetable`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
centre: centreName,
date: pDate,
commodity: vegetable
})
}
);
let result = await price_prediction.json();
return result;
} catch (error) {
console.log(error);
}
};
Github link for the frontend code - https://github.com/HashiniW/CDAP-F
Github link for the backend code - https://github.com/HashiniW/CDAP-B
Any suggestions to overcome this error? Thank You!

Try using mode: "no-cors" on the fetch frontend.
export const getPredictedPrice = async (centreName, pDate, vegetable) => {
try {
let price_prediction = await fetch(
`${BASE_URL}/vegetable`,
{
//Adding mode: no-cors may work
mode: "no-cors",
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
centre: centreName,
date: pDate,
commodity: vegetable
})
}
);
let result = await price_prediction.json();
return result;
} catch (error) {
console.log(error);
}
};

Use following code in your python project :
from flask import Flask, jsonify
from routes.lstm_price_route import lstm_price_blueprint
from routes.lstm_route import lstm_blueprint
from flask_cors import CORS, cross_origin
import csv
import json
server = Flask(__name__)
cors = CORS(server , resources={r"/*": {"origins": "*", "allow_headers": "*", "expose_headers": "*"}})
server.register_blueprint(lstm_blueprint)
server.register_blueprint(lstm_price_blueprint)

Sending Ajax request to call a python function through jquery

I am trying to send a request to call a python method in my python script.
Server Side:
I am using flask ,so the server is running on port 5000.It has a file called helloflask.py which look like
#helloflas.py
from flask import Flask
app = Flask(__name__)
#app.route("/hello",methods=['GET','POST'])
def hello():
return "Comming Here"
if __name__ == "__main__":
app.run(port=5000,debug=True)
Client Side:
Independent HTML outside of flask which is sending the ajax request.
<!--ajax call-->
<script>
function findAppartment() {
$.ajax({
url: "https://127.0.0.1:5000/hello/",
type: "get",
contentType: "application/xml; charset=utf-8",
success: function (response) {
// $('#blurg').html(response).fadeIn(1500);
}
});
}
</script>
when the request is made,I get the following error.It hits the server and gives the following error:
Error : code 400, message Bad request syntax ('\x16\x03\x01\x00\xa1\x01\x00\x00\x9d\x03\x02Q\xd8\xc0O+\x8f\xa6\x16F\x9a\x94\x90|$\x11\xd3\xd8\x15\x04$\xe4\xb4>\xc0\x0e\xe3\xa0h\xea\x07\x00\xc5\x00\x00H\xc0')
I tried many things but things don't seem to be working.Could any one help???Any help is highly appreciated.