设置了 headers 和 axios，但为何出现 cros 错误？

大家好，我们又见面了啊~本文《设置了 headers 和 axios，但为何出现 cros 错误？》的内容中将会涉及到等等。如果你正在学习Golang相关知识，欢迎关注我，以后会给大家带来更多Golang相关文章，希望我们能一起进步！下面就开始本文的正式内容~

前提/你想要实现的目标

• react x redux（端口：3000）
• go（端口：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端的标头设置了cros，并且 另一个 get api 避免了该错误。

另外，当你用 postman 点击 api 时，它会变成 header 我们还确认，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 的区别吗？我应该如何调试它？

解决方案

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

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

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

这篇文章可能会帮助您解决后端的CORS问题：https://flaviocopes.com/golang-enable-cors/

今天带大家了解了的相关知识，希望对你有所帮助；关于Golang的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~