预检响应在axios中没有HTTP正常状态

Question

i am trying to add stations using open weather api and doing post request using axios

const stationData={
        external_id:this.state.external_id,
        name:this.state.name,
        latitude:this.state.latitude,
        longitude:this.state.longitude,
        altitude:this.state.altitude,
        }


    const url = `http://api.openweathermap.org/data/3.0/stations?appid=${ApiKey}`;

    var headers = {
        'Content-Type': 'application/json;charset=UTF-8', 
        "Access-Control-Allow-Origin": "*"
    }

    axios.post(url, data, {headers: headers}).then((response)=>{
console.log("response is " + response);
      }).catch((err)=>{
console.log("error is " + err);
      })

but it is giving me an error

OPTIONS http://api.openweathermap.org/data/3.0/stations?APPID=2747592557924542516e283a7f905a81 404 (Not Found)

Failed to load http://api.openweathermap.org/data/3.0/stations?APPID=2747592557924542516e283a7f905a81: Response for preflight does not have HTTP ok status.

error is Error: Network Error

if i use the Postman to send the post request, its working there, any help please??

Answer 1

From Axios Git: Unfortunately, I think this boils down to one of the dreaded CORS issues that developers often face. I could duplicate this and I tried a bunch of ways to poke at it to get the preflight request to work, but I couldn't find an opening in the server to let me through

Other useful links: cannot get cross-site POST to work , can not make post request ( cross domain ) . Basically it is a browser security issue rather than Axios. They are not planning to address that: either you choose another library or handle it from your backend. Note that with security disabled option in Chrome the request works.