Access-Control-Allow-Origin 跨域设置多域名

悉小多 發表於 2021-10-24 21:18:00

Access-Control-Allow-Origin 跨域设置多域名

<div>
<div>
在HTML5中有一种新的跨域方式，即设置“Access-Control-Allow-Origin”可以指定允许跨域访问的域名。 
Node.js中可以这样写
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-jsx"><code class="language-jsx">app.all('*', function(req, res, next) {
 res.header("Access-Control-Allow-Origin", 'https://www.google.com');
 res.header('Access-Control-Allow-Methods', 'POST, GET');
 res.header('Access-Control-Allow-Headers', 'X-Requested-With');
 res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
</code></pre>
</div>
但在实际使用中，可能需要设置多个域名。 
在网上查询资料，有一种写法
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-cpp"><code class="language-cpp">Access-Control-Allow-Origin: https://www.google.com,https://www.baidu.com
</code></pre>
</div>
改成相应的代码，但是始终提示问题，只允许一个值。
于是换种方式，查资料发现，许多是先自己判断域名是否是允许的，如果是再设置允许跨域访问。那么代码应该改成如下形式
<div class="_2Uzcx_"><button class="VJbwyy" type="button"></button>
<pre class="line-numberslanguage-jsx"><code class="language-jsx">app.all('*', function(req, res, next) {
if( req.headers.origin == 'https://www.google.com' || req.headers.origin == 'https://www.baidu.com' ){
 res.header("Access-Control-Allow-Origin", req.headers.origin);
 res.header('Access-Control-Allow-Methods', 'POST, GET');
 res.header('Access-Control-Allow-Headers', 'X-Requested-With');
 res.header('Access-Control-Allow-Headers', 'Content-Type');
}
next();
});
</code></pre>
</div>
使用时可以把允许访问的域名写成一个数组，然后JS写一个比较字符串是否在数组内的函数，这样使用就比较方便了。
其中，<code>Access-Control-Allow-Origin</code>就是我们需要设置的域名，<code>Access-Control-Allow-Methods</code>是允许的请求方式，<code>Access-Control-Allow-Headers</code>跨域允许包含的头。
<div class="image-package">
<div class="image-container">
<div class="image-container-fill"> </div>
<div class="image-view" data-width="1182" data-height="536"><img src="//upload-images.jianshu.io/upload_images/1901885-88efdc8f4c89d324.png?imageMogr2/auto-orient/strip|imageView2/2/w/1182/format/webp" data-original-src="//upload-images.jianshu.io/upload_images/1901885-88efdc8f4c89d324.png" data-original-width="1182" data-original-height="536" data-original-format="image/png" data-original-filesize="51153" data-image-index="0"></div>
</div>
<div class="image-caption">兼容性</div>
</div>
</div>
 作者：LnEoi 链接：https://www.jianshu.com/p/b587dd1b7086 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</div>

</div>
<div id="MySignature" role="contentinfo">
漫思 
来源：https://www.cnblogs.com/sexintercourse/p/15455746.html

頁: [1]

琼殿技术论坛's Archiver

Access-Control-Allow-Origin 跨域设置多域名