fetch 引发 blocked by CORS policy

最新推荐文章于 2024-05-24 09:57:37 发布

有关心情

最新推荐文章于 2024-05-24 09:57:37 发布

阅读量1.2w

点赞数 6

分类专栏： HTTP 文章标签： http cors fetch flask

本文链接：https://blog.csdn.net/qq_41359051/article/details/104176894

版权

fetch 引发 blocked by CORS policy

文章目录

fetch 引发 blocked by CORS policy

起步

当使用 fetch 函数做跨域请求时，大概率会在浏览器 Console 中看到这样一个错误信息：Access to fetch at 'xxx' from origin 'null' has been blocked by CORS policy: 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.。

会出现上述错误是因为你在做跨域请求，这是一项浏览器认为不安全的操作。那么如何鉴定是不是在跨域呢？要看 url 是否同源，同源的标准是：协议，域名，端口均相同。详情可参看浏览器的同源策略。

除大公司外，我斗胆猜测一下你之所以需要 CORS (跨域资源共享)，可能是以下原因之一：1. 你在写 demo; 2. 你处于前后端分离开发。

接下来我会后端采用 flask 讲述如何解决 CORS 被禁问题。选择 flask 是因为该框架在处理 Content-Type 为 text/plain 和 application/json 时存在明显区别，有助实验观察。如果你使用的是其他语言，或者其他框架，都没关系，原理是相通的。

从一个 demo 入手

假设当前我知道了 fetch 函数如何发起 post 请求，但我想测试一下，验证我知道的对不对。于是我写了下面这段 js 代码：

fetch("http://127.0.0.1:8080/login", {
   
  method: "POST",
  body: JSON.stringify({
   
    username: "zhong",
    password: "zzZhong",
  }),
})
.then(resp => resp.json())
.then(data => console.log(data))

这段 js 的含义是，向 http://127.0.0.1:8080/login 发起 post 请求，并等待后端响应，最后将后端响应的数据打印到 Console 中。

毕竟我只是想简单测试一下，偷懒起见，把 js 代码嵌入 html 文件中，并且在浏览器里以绝对路径的方式直接访问 html 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"</

最低0.47元/天解锁文章

有关心情

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
fetch 引发 blocked by CORS policy

fetch 引发 blocked by CORS policy文章目录fetch 引发 blocked by CORS policy起步从一个 demo 入手后端如何解析参数流行的 json 风格参考起步当使用 fetch 函数做跨域请求时，大概率会在浏览器 Console 中看到这样一个错误信息：Access to fetch at 'xxx' from origin 'null' has...
复制链接

扫一扫