它是在 axios 中设置的标题，但为什么会发生 cors 错误？答案

【问题标题】：It was set headers and axios but Why happen cros error?它是在 axios 中设置的标题，但为什么会发生 cors 错误？
【发布时间】：2021-01-29 02:11:36
【问题描述】：

前提/你想要达到的目标

React x Redux（端口：3000）
去（端口：8080）
我正在做一个 SPA。

我在使用 Go API 时遇到了 CROS 错误。这个问题我遇到过很多次了，每次觉得解决了，我就打一个新的API。

我应该进行基本设置，但我遇到了麻烦，因为我不知道是什么原因造成的。如果您能帮助我们，我们将不胜感激。

问题/错误信息

Access to XMLHttpRequest at'http://localhost:8080/login' from origin'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No'Access-Control -Allow-Origin'header is present on the requested resource.

我在点击登录 API（帖子）时遇到了这个问题。但是，当我多次遇到这个问题时，我在api和axios端的header上设置了cros，并且另一个 get API 避免了该错误。

另外，当你用邮递员打 api 时，它会变成标题我们也确认了在 Go 中设置的标头（例如 Allow-Origin）没有任何问题。

适用源代码

Go 中的标题设置

w.Header (). Set ("Content-Type", "application /json")
w.Header (). Set ("Access-Control-Allow-Origin", "http://localhost:3000")
w.Header (). Set ("Access-Control-Allow-Credentials", "true")

响应 axios 设置

axios.defaults.baseURL ='http://localhost:8080';
axios.defaults.headers.post ['Content-Type'] ='application/json';

发布错误代码

export const signIn = (email, password) => {
    return async (dispatch) => {
        try {
            const response = await axios.post ('/login', {
                email: email,
                password: password,
            });
            const data = response.data;
            dispatch (
                signInAction ({
                    isSignedIn: true,
                })
            );
        } catch (error) {
            console.log (error);
        }
    };
};

成功获取 getapi 的代码

 useEffect (() => {
        async function fetchTickers () {
            try {
                const response = await axios.get (`/ticker?Symbol=^skew`);
                const data = response.data;
                setChartAry ([... chartAry, [... data.daily]]);
            } catch (error) {
                console.log (error);
                setChartAry ([]);
            }
        }
        fetchTickers ();
    }, []);

我尝试了什么

我尝试了所有与 stackoverflow 等有关的解决方案。此外，考虑到浏览器本身存在问题的可能性，我们还清除了缓存。

是不是 axios by get 和 post 的区别？又该如何调试呢？

【问题讨论】：

标签： reactjs go redux axios

【解决方案1】：

我前段时间遇到过这个问题，但我使用 Express 作为后端，谁知道这也可以解决你的问题。

尝试将此添加到 axios 设置中axios.defaults.withCredentials = true;

你还需要允许preflight requests的OPTIONS方法

这篇文章或许能帮你解决后端的CORS问题：https://flaviocopes.com/golang-enable-cors/

【讨论】：

谢谢你的建议，我都试过了，还是没解决。

【解决方案2】：

该方法已在 gorilla / mux 中得到验证。

   - r.HandleFunc("/login", app.loginHandler).Methods("POST")
   + r.HandleFunc("/login", app.loginHandler).Methods("POST", "OPTIONS")

我们还必须处理预检。

if r.Method == "OPTIONS" {
    w.Header().Set("Content-Type", "application/json")
    w.Header().Set("Access-Control-Allow-Origin", "http://localhost:3000")
    w.Header().Set("Access-Control-Allow-Credentials", "true")
    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    w.WriteHeader(http.StatusOK)
        return
}

【讨论】：