React项⽬跨域处理(两种⽅案)跨域解决⽅案可以分为开发模式和⽣产模式
git查看脚⼿架⼯具,如下所⽰
然后进⼊⽂档,⽂档⾥有关于跨域的相关配置
如何搭建git服务器
如下所⽰进⾏配置
(1)第⼀种⽅案
配置后重新测试
(2)第⼆种跨域⽅案
先利⽤express框架搭建简单后台服务
接下来创建路由⽂件
接下来启动后台服务,做下测试。此时node服务器和React所在的webpack服务器不在同⼀个端⼝号,所以即使在本地开发,仍存在跨域
接下来查看个github⽂档的第⼆种⽅案,⼿动配置(结合Express使⽤)
⾄此便实现了跨域,这种在开发⾥应⽤较多
(3)案例实践:
之前的之所以可以请求其他域名下的⽹络数据,是因为我们在服务端设置了相关配置,如下所⽰
如果将其注释掉,再次测试,如下所⽰
此时便⽆法跨域操作,接下来介绍下React如何实现跨域代理
(1)分析
  React项⽬脚⼿架启动时,便会在服务器下启动,主要运⾏在webpack服务器下。此时可以利⽤前端服务器去解决跨域问题
注意:
跨域只是前端遇到的问题,即浏览器的相关政策导致的。服务器与服务器之间并不存在跨域。
  注意:该配置只是⽤于开发阶段,真正上线后是不能⽤的
(2)步骤
  1、执⾏npm run eject抛出配置⽂件
    本地有git的可能会报错,将git初始化仓库提交⼀下即可。喷出配置⽂件后,项⽬结构如下
  2、修改配置⽂件fig.dev.js
    ⽂件内部添加服务器配置,因为新版没有了该配置⽂件。所以我们换种⽅法,配置package.json⽂件
(3)package.json⽂件
  在package.json中添加proxy字段,如下所⽰
  接⼝调⽤:
此时的/api/login便会被替换为localhost:3888/login
  proxy中的部分参数说明:
1、'/test/*'以及target: 'localhost'
从名字就能看出,这个实际上是将匹配'/test/*'这种格式的API的域名重定向为'localhost'
结合上⾯的 “调⽤接⼝” 可以看出,url: '/test/testFetch/Login.php'这句,实际上会⾃动补充前缀,也就是说,url: '/test/testFetch/Login.php' 等价于 url: '10.0.0.9:3000/test/testFetch/Login.php'
但是,我们使⽤了http-proxy进⾏重定向,这样的话,url: '/test/testFetch/Login.php' 等价于 url: 'localhost/test/testFetch/Login.php'
2、changeOrigin
true/false, Default: false - changes the origin of the host header to the target URL
本地会虚拟⼀个服务端接收你的请求并代你发送该请求——这个是别⼈的说法
我试了⼀下,就算这个参数设置成false也有部分情况是可以的,建议将其设置成true
3、secure
true/false, if you want to verify the SSL Certs
4、pathRewrite
例⼦:pathRewrite: {'^/api': ''}
Object-keys will be used as RegExp to match paths
⼩结:Vue也是同理