fetch各种报跨域错误,数据无法获取的解决方案

忘是亡心i 2023-07-15 09:04 4阅读 0赞

### 1、介绍 ###

fetch 提供了一个获取资源的接口 (包括跨域)。

fetch 的核心主要包括：Request , Response , Header , Body

利用了请求的异步特性 --- 它是基于 promise 的

### 2、用法 ###

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> </td> 
   <td> <p><code>var</code>&nbsp;<code>request =&nbsp;</code><code>new</code>&nbsp;<code>Request(</code><code>'/users.json'</code><code>, { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>method:&nbsp;</code><code>'POST'</code><code>,</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>mode:&nbsp;</code><code>'cors'</code><code>,</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>redirect:&nbsp;</code><code>'follow'</code><code>,</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>headers:&nbsp;</code><code>new</code>&nbsp;<code>Headers({ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>'Content-Type'</code><code>:&nbsp;</code><code>'text/plain'</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code></p> <p><code>});</code></p> </td> 
  </tr> 
 </tbody> 
</table>

## ##

### **3、错误一** ###

![format_png][]

后端没有设置 跨域头部

**　　处理方法：后端加跨域头部**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>res.setHeader(</code><code>'Access-Control-Allow-Origin'</code><code>,&nbsp;</code><code>'*'</code><code>);&nbsp;</code><code>//最简单的设置跨域 *</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 4、错误二 ###

![format_png 1][]

这个错误是是一系列的错误，这里显示的是  Content-Type，还有可能是 Origin 等

**　　处理方法：后端加允许headers头部**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>res.setHeader(</code><code>'Access-Control-Allow-Headers'</code><code>,&nbsp;</code><code>'Origin, X-Requested-With, Content-Type, Accept'</code><code>);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 5、错误三 ###

![format_png 2][]

这里的错误是什么呢，前端设置了

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>fetch(url,{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>credentails:</code><code>true</code><code>,&nbsp;&nbsp;&nbsp;</code><code>// 允许允许传递 cookie</code></p> <p><code>})</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在请求时候报错了。

**　错误方法：后端加头部 credentials**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>res.setHeader(</code><code>'Access-Control-Allow-Credentials'</code><code>,&nbsp;</code><code>true</code><code>);</code><code>//告诉客户端可以在HTTP请求中带上Cookie</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 6、错误四 ###

![format_png 3][]

有时候，后端设置跨域，并且跨域设置为 \*

但是前端仍然会报错，就像这个

**　　处理方法：修改后端跨域头部**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>res.setHeader(</code><code>'Access-Control-Allow-Origin'</code><code>, origin);</code><code>//注意这里不能使用 *&lt;br&gt;// origin 是你需要请求跨域资源的来源地址&lt;br&gt;// 如上面错误就可以是 http://127.0.0.1:8082</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 7、错误五 ###

当我们使用 fetch 设置 mode ：‘ no-cors ’，如：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>fetch(url,{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>mode:</code><code>'no-cors'</code><code>,&nbsp;&nbsp;</code></p> <p><code>})</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在 network 的相应请求中，

有数据返回来，请求可以看到

但是就是得不到数据，fetch 无反应

这时候在控制台 console 上会出来这样错误

![format_png 4][]

** 　　处理方法：将 no-cors 改为 cors**

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>fetch(url,{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>mode:</code><code>'cors'</code><code>,&nbsp;&nbsp;</code></p> <p><code>})</code></p> </td> 
  </tr> 
 </tbody> 
</table>

### 8.还有一种报错是后端返回的格式不对。 ###

![format_png 5][]

不能直接返回字符串，需要后端 toJson

[format_png]: /images/20230528/11d5d9ed67e64088a1975d5fed1796cf.png
[format_png 1]: /images/20230528/13e5851ce2a942ab91b1545a2449ac21.png
[format_png 2]: /images/20230528/8d8501b6b29a432682db55595ca8790b.png
[format_png 3]: /images/20230528/85423a110b4d4bf4bc79c0f3803669b0.png
[format_png 4]: /images/20230528/33906addec9d41d0b002f20f7d4723d3.png
[format_png 5]: /images/20230528/7c533bb7a2e9496eb19560b168f42508.png