React项目解决跨域的两种方式
<p>最近在学习http的相关知识，看到有关跨域的问题。平时工作中也会一直听到跨域问题，自己就深入的学习一下，这里记录一下，方便以后查阅。</p><p><span style="font-family: 黑体; font-size: 18px">1、为什么会出现跨域？</span></p>
<p>浏览器遵循<strong>同源政策</strong>(<span style="color: rgba(255, 0, 0, 1)"><code>scheme(协议)</code>、<code>host(主机)</code>和</span><code><span style="color: rgba(255, 0, 0, 1)">port(端口</span>)</code>都相同则为<code>同源</code>)。</p>
<p>非同源站点有这样一些限制:</p>
<div>
<ul>
<li>不能读取和修改对方的 DOM</li>
<li>不读访问对方的 Cookie、IndexDB 和 LocalStorage</li>
<li>限制 XMLHttpRequest 请求。(后面的话题着重围绕这个)</li>
</ul>
<p>当浏览器向目标 URl 发 Ajax 请求时，只要当前 URL 和目标 URL 不同源，则产生跨域，被称为<span style="color: rgba(255, 0, 0, 1)"><code>跨域请求</code></span>。</p>
<p><span style="font-family: 黑体; font-size: 18px">2、解决方法</span></p>
<ul>
<li>JSONP</li>
<li>CORS（跨域资源共享）</li>
<li>Nginx</li>
</ul>
<p>这里简单的介绍一下前两种方法：</p>
<p>【1】JSONP（参考文章）</p>
<p>JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。</p>
<p>在HTML标签里，一些标签比如script、img这样的获取资源的标签是没有跨域限制的。</p>
<p>核心思想：网页通过添加一个<code><script>元素</code>，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。</p>
<p>【2】CORS（参考文章）</p>
<ul>
<li>普通跨域请求：只需服务器端设置Access-Control-Allow-Origin</li>
<li>带cookie跨域请求：前后端都需要进行设置(前端设置：根据xhr.withCredentials字段判断是否带有cookie)</li>
</ul>
<p>本篇主要介绍React项目中的解决办法：<strong>proxy与ngnix。</strong></p>
<p><span style="font-size: 18px; font-family: 黑体">3、proxy</span></p>
<blockquote>
<p>在package.json文件中使用proxy配置可以解决跨域问题.</p>
</blockquote>
<div class="cnblogs_code">
<pre> "proxy"<span style="color: rgba(0, 0, 0, 1)">:{
</span>"/api"<span style="color: rgba(0, 0, 0, 1)">:{
</span>"target":"http://xxx.xxx.com"<span style="color: rgba(0, 0, 0, 1)">,
</span>"changeOrigin": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
</span>"pathRewrite"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"^/api": ""<span style="color: rgba(0, 0, 0, 1)">
}
}
}</span></pre>
</div>
<ul>
<li><code>target</code>：接口的域名</li>
<li><code>changeOrigin</code>：开启代理</li>
<li><code>pathRewrite</code>：可以看到我使用了<code>/api</code>来匹配请求接口的域名，而接口名称是<code>/admin/login</code>，因此在实际请求中应该写成<code>/api/admin/login</code>，但是我实际请求的地址又是没有api前缀的，因此需要通过pathRewrite重写地址，将接口请求的时候前缀去除。</li>
</ul>
<p><span style="font-family: 黑体; font-size: 18px">4、nginx</span></p>
<blockquote>
<p>上面的方式可以解决我们在React项目中开发环境的跨域问题，但是无法解决生产环境上的跨域问题（偶尔也会遇见） 。</p>
</blockquote>
<ol>
<li>Mac安装nginx以及⚠️注意事项：请查看下篇文章</li>
<li>功能：</li>
</ol>
<ul>
<li> http服务器，可以独立提供http服务；</li>
<li>虚拟主机：多个域名指向同一个服务器，服务器根据不同的域名把请求转发到不同的应用服务器；</li>
<li>反向代理：负载均衡，将请求转发至不同的服务器</li>
</ul>
<p> 3. 默认配置文件</p>
<div class="cnblogs_code">
<pre> location /<span style="color: rgba(0, 0, 0, 1)"> {
root html; #文件根目录
indexindex.html index.htm; #默认起始页
}</span></pre>
</div>
<p> 4.修改配置文件</p>
<div class="cnblogs_code">
<pre> location /<span style="color: rgba(0, 0, 0, 1)"> {
root </span>/Users/zhangsan/Documents/test/build; #直接指向打包后的文件
<span style="color: rgba(0, 0, 0, 1)"> indexindex.html index.htm;
}
location </span>/api {
rewrite ^.+api/?(.*)$ /$1 <span style="color: rgba(0, 0, 255, 1)">break</span><span style="color: rgba(0, 0, 0, 1)">;
proxy_pass http:</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">XX.XXX.com;# 将地址代理到api上</span>
}</pre>
</div>
<p> </p>
</div>
</div>
<div id="MySignature" role="contentinfo">
stay hungry, stay foolish<br><br>
来源：https://www.cnblogs.com/yy136/p/12674972.html
頁:
[1]