2018-08-07

React中fetch跨域使用

1.获取本地json数据

当后台接口还未提供时，通常需要我们自己模拟数据展示前台页面。在创建json文件时，大家更倾向于将json放在与jsx同一目录下，但使用fetch请求时却很容易出现如下错误：

因为fecth的请求路径是相对于 http://locahost:3000/ 的，所以实际上我们并没有获取到该json数据，正确的做法是将json文件放在与index.html同一目录下即可，此时请求路径没有问题

fetch请求本地json数据

2.跨域获取数据 

后端：spring boot，运行在8080端口

前端：react，运行在3000端口

我们同样使用fetch进行跨域访问，此时加入第二个可选参数，用来控制不同配置的init对象

fetch的mode配置项有3个值，如下：

（1）same-origin：该模式是不允许跨域的，它需要遵守同源策略，否则浏览器会返回一个error告知不能跨域；其对应的response type为basic。

（2）cors: 该模式支持跨域请求，顾名思义它是以CORS的形式跨域；当然该模式也可以同域请求不需要后端额外的CORS支持；其对应的response type为cors。

（3）no-cors: 该模式用于跨域请求但是服务器不带CORS响应头，即服务端不支持CORS；其对应的response type为opaque。该模式允许浏览器发送本次跨域请求，但是不能访问响应返回的内容。

如果将'mode'设置为'cors',而不对后端进行cors支持设置时，会报如下错误：

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

因此直接在Appplication.java添加如下代码即可：

spring boot跨域设置

addAllowedOrigin(String origin)是追加访问源地址，设置为 ‘*’ 表示允许全部访问源。具体可查看CorsConfiguration类的官方文档

react中使用fetch进行请求：

fetch请求