跨域解决方案

最新推荐文章于 2025-07-08 19:49:43 发布

原创最新推荐文章于 2025-07-08 19:49:43 发布 · 382 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#跨域解决方案

javascript 专栏收录该内容

14 篇文章

订阅专栏

浏览器端的同源策略

如果两个页面的协议,端口和域名中的其中任意一个不相同, 它们就是不同源的, 浏览器会限制他们之间的资源交互;

跨域

跨域的安全限制只针对浏览器, 服务器是没有跨域的安全限制的;

代理跨域

原理： 由于服务器没有跨域限制，所以在需要跨域访问时，在中间设置一个中间层

举例：

192.168.10.1:8080 是调用方
192.168.10.2:8080 是被调用方

它俩是不同域的，但我们可以在 nginx 或 Apache 上进行配置代理：将被调用方 192.168.10.2:8080 射成别的路径。

http {
    server {
       listen 80;
       
	   location /{
			proxy_pass http://192.168.10.1:8080;
	   }
	   
	   location /test{
			proxy_pass http://192.168.10.2:8080;
	   }
    }
}

比如上面，nginx 运行在 192.168.10.1 上，nginx 将 192.168.10.2:8080 端口的映射成了 test ，当调用方访问 test 路径时，这样的方法在外部看起来就不像是跨域了，像是访问本地（http://192.168.10.1:8080），但实际访问别的域（http://192.168.10.2:8080）。

cors(跨域资源共享)

这种方式不需要前端做任何配置，只要服务器进行配置，唯一需要注意的是，需要携带cookie信息时，需要将withCredentials设置为true即可

CORS是通过目标服务器返回的Header设置来控制是否可跨域。其中重要的一个参数即 Access-Control-Allow-Origin（访问控制允许来源），通过这个参数指定可以接收的请求资源

cors工作过程
CORS规范引入了几个支持跨源请求的新HTTP头。如果浏览器支持CORS，它会自动为跨源请求设置这些标头。
一个简单类型跨域，请求时会添加一个Origin,值为请求的源
如果服务器允许请求的源可以访问，就在响应时添加一个Access-Control-Allow-Origin，其值和请求中的Origin相同，否则返回一个正常的响应。浏览器在收到响应时根据是否有Access-Control-Allow-Origin判断是否把响应中的资源交给请求的源。
如果是复杂类型的请求（如请求方式是PUT或DELETE或者Content-Type字段的类型是application/json）会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及服务器允许使用哪些HTTP Method和Header字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错，整个过程都是浏览器自动执行的。