在React Application中启用CORS的最佳方法是什么？

Question

在react中有多种方式进行REST调用-例如

 axios.post('link', JSON.stringify(data1),
          {
              headers: {"content-type" : "application/json", "Access-Control-Allow-Origin" : "*"}})
          .then(response => {
              console.log("res:", response)
          })
          .catch(err =>{
              console.log(err)
          })
        }

要么

 fetch('http://localhost:8080/feedbacks/addfeedback', {
               method: 'post',
               headers: {
                   'Content-Type': 'application/json',
                   'Access-Control-Allow-Origin' : '*'
               },
               body:body

启用CORS的最有效方法是什么。 我还有其他方法可以在前端还是后端执行此操作？

Answer 1

这取决于您使用的HTTP库。

请参阅Axios和Fetch有什么区别？ 。

我通常使用Axios，接下来要做的是创建一个全局实例并配置一次Axios。

export const api = axios.create({
    baseURL: '_URL_',
    timeout: 1000,
    withCredentials: false,
    responseType: 'json',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*' // whatever you want
    }
});

// You can add common headers later
api.defaults.headers.common['Authorization'] = `Bearer ${token}`;

另外，我还在服务器端应用程序上启用CORS。

感谢@ henrik123提供了很好的解释：

浏览器将看到某些Javascript请求试图向与当前浏览器不同的域，子域或端口发起请求。 如果这些内容中有任何不同，则会启动CORS。使用Axios，Fetch或其他任何库都没关系