Cross-Origin Resource Sharing (CORS) problem

[zhuyeaini9]

I write one react app client,use axios to request data :

axios({ method: 'get', url: http://localhost:8080/api/cache?key=test,

      }).then(res => {
        const rdata = res.data
        console.log(rdata)
      })

use http server web api,but always return No 'Access-Control-Allow-Origin' header is present on the requested resource in browser. I have add follow line in response:

hr.SetHeader("Access-Control-Allow-Origin", "http://localhost:3000");

but still report such error.

the request and response:

Request method: GET Request URL: /api/cache?key=test Request protocol: HTTP/1.1 Request headers: 14 Host : localhost:8080 Connection : keep-alive sec-ch-ua : "Google Chrome";v="93", " Not;A Brand";v="99", "Chromium";v="93" Accept : application/json, text/plain, / sec-ch-ua-mobile : ?0 User-Agent : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 sec-ch-ua-platform : "Windows" Origin : http://localhost:3000 Sec-Fetch-Site : same-site Sec-Fetch-Mode : cors Sec-Fetch-Dest : empty Referer : http://localhost:3000/ Accept-Encoding : gzip, deflate, br Accept-Language : zh-CN,zh;q=0.9,en;q=0.8,en-US;q=0.7 Request body: 0

Status: 200 Status phrase: OK Protocol: HTTP/1.1 Headers: 5 Content-Type : text/plain; charset=UTF-8 Content-Length : 6 Access-Control-Allow-Origin : http://localhost:3000 Access-Control-Allow-Methods : GET, DELETE, HEAD, OPTIONS Access-Control-Allow-Headers : cache-control,content-type,hash-referer,x-requested-with Body: 6 zhuzhu