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也是同理

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。