请求头Content-Type与后端不匹配引发的“跨域”问题...mode to ‘no-cors‘ to fetch the resource with CORS disabled.

最新推荐文章于 2025-03-09 17:26:46 发布

大熊猫玩菜刀

最新推荐文章于 2025-03-09 17:26:46 发布

阅读量7.4k

点赞数 1

分类专栏：前端文章标签： Content-Type

本文链接：https://blog.csdn.net/u013727805/article/details/115943329

版权

前端专栏收录该内容

16 篇文章

订阅专栏

报错信息（后端已允许跨域）：

Access to fetch at 'http://api.test.com/api' from origin 'http://192.168.2.22:8100' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

尝试不加Content-Type请求头或修改请求Content-Type值（最重要的是要与后端约定好请求方式，防止盲目请求）：

application/json

application/x-www-form-urlencoded

......

测试代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

        <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->

        <script>
            // const res = $.ajax({ url: 'http://api.test.com/api?action=userlogin', async: false, type: 'POST' });
            /* async function testAxios () {
                const res = await axios.post('http://api.test.com/api?action=userlogin');
                console.log(res);
            } */
            async function testFetch() {
                const res = await fetch('http://api.test.com/api', {
                    method: 'POST',
                    // body: JSON.stringify({ action: 'userlogin' }),
                    // headers: { 'Content-Type': 'application/json;charset=utf-8' },
                    body: 'action=userlogin',
                    headers: new Headers({
                        'Content-Type': 'application/x-www-form-urlencoded',
                    }),
                });
                console.log(res);
            }

            testFetch();
        </script>
    </body>
</html>