跨域问题 一时失言乱红尘 2021-09-03 08:04 694阅读 0赞 # 一.http # (一).http请求的推演过程 1. url(www.baidu.com) =>进行DNS域名解析 => 得到 ip (192.168.1.2) 2. 拿到ip 去跟服务器建立 tcp 连接 3. 建立 tcp 连接之后发起 http 请求 ( tcp是比http更底层一个连接协议)(ip是tcp下面一层) 4. http连接建立之后 服务器把html 发送给浏览器 5. 浏览器解析html(js文件,css文件,图片 下载 运行) 6. 浏览器渲染html 7. 服务器关闭连接 tcp http ip 上一层 是tcp ,上一层是http DNS域名解析采用的是递归查询的方式,过程是, 先去找浏览器自身域名缓存区查找-》操作系统的域名缓存查找-》hosts查找-》域名服务器查找 TCP是一个端到端的可靠的面相连接的协议,HTTP基于传输层TCP协议不用担心数据传输的各种问题 (二).tcp三次握手 第一次握手:建立连接时,客户端发送syn包(syn=x)到服务器,并进入SYN\_SENT状态,等待服务器确认;SYN:同步序列编号(Synchronize Sequence Numbers)。 第二次握手:服务器收到syn包,必须确认客户的SYN(ack=x+1),同时自己也发送一个SYN包(syn=y),即SYN+ACK包,此时服务器进入SYN\_RECV状态; 第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=y+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。 # 二. Request Headers的属性 # **请求报文:HTTP协议使用TCP协议进行传输,在应用层协议发起交互之前,首先是TCP的三次握手。完成了TCP三次握手后,客户端会向服务器发出一个请求报文** ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][] HTTP最常见的请求头如下: Accept 作用: 浏览器端可以接受的媒体类型, 数据类型 例如: Accept: text/html 代表浏览器可以接受服务器回发的类型为 text/html 也就是我们常说的html文档,如果服务器无法返回text/html类型的数据,服务器应该返回一个406错误(non acceptable)。 通配符 \* 代表任意类型 例如 Accept: \*/ \*代表浏览器可以处理所有类型,(一般浏览器发给服务器都是发这个)。 Accept-Encoding: 作用: 浏览器申明自己接收的编码方法,通常指定压缩方法,是否支持压缩,支持什么压缩方法(gzip,deflate),(注意:这不是只字符编码),例如:Accept-Encoding: gzip, deflate Accept-Language 作用: 浏览器申明自己接收的语言。当服务器能够提供一种以上的语言版本时要用到; 语言跟字符集的区别:中文是语言,中文有多种字符集,比如big5,gb2312,gbk等等,例如: Accept-Language:zh-CN,zh;q=0.8 。 Authorization:授权信息,通常出现在对服务器发送的WWW-Authenticate头的应答中; 也可以把token的值放在这里,传给服务器 Connection 例如: Connection: keep-alive 当一个网页打开完成后,客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭,如果客户端再次访问这个服务器上的网页,会继续使用这一条已经建立的连接。 例如: Connection: close 代表一个Request完成后,客户端和服务器之间用于传输HTTP数据的TCP连接会关闭, 当客户端再次发送Request,需要重新建立TCP连接。 Content-Length:表示请求消息正文的长度; Cache-Control:缓存控制,服务器通过控制浏览器要不要缓存数据 Cookie:客户机通过这个可以向服务器带数据 From:请求发送者的email地址,由一些特殊的Web客户程序使用,浏览器不会用到它; Host(发送请求时,该报头域是必需的) 作用: 请求报头域主要用于指定被请求资源的Internet主机和端口号,它通常从HTTP URL中提取出来的。 例如: 我们在浏览器中输入:[http://www.hzau.edu.cn][http_www.hzau.edu.cn] 浏览器发送的请求消息中,就会包含Host请求报头域,如下:Host:www.hzau.edu.cn 此处使用缺省端口号80,若指定了端口号,则变成:Host:指定端口号。 Referer 当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器我是从哪个页面链接过来的,服务器籍此可以获得一些信息用于处理。比如从我主页上链接到一个朋友那里,他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上的链接访问他的网站。 If-Modified-Since:只有当所请求的内容在指定的日期之后又经过修改才返回它,否则返回304“Not Modified”应答; Pragma:指定“no-cache”值表示服务器必须返回一个刷新后的文档,即使它是代理服务器而且已经有了页面的本地拷贝; User-Agent 作用:浏览器类型;告诉HTTP服务器, 客户端使用的操作系统和浏览器的名称和版本。 UA-Pixels,UA-Color,UA-OS,UA-CPU:由某些版本的IE浏览器所发送的非标准的请求头,表示屏幕大小、颜色深度、操作系统和CPU类型。 我们上网登陆论坛的时候,往往会看到一些欢迎信息,其中列出了你的操作系统的名称和版本,你所使用的浏览器的名称和版本,这往往让很多人感到很神奇,实际上,服务器应用程序就是从User-Agent这个请求报头域中获取到这些信息User-Agent请求报头域允许客户端将它的操作系统、浏览器和其它属性告诉服务器。 例如: User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; InfoPath.2; .NET4.0E)。 另外,访问一些其他的URL的时候,request 的Header里面一些其他的字段,下面来进行列举: 比如我在登录一个需要用户名密码登录的网站时Request Header里面就有上面还没有提到过的字段。 # 三.Response Headers # **响应报文**:当收到get或post等方法发来的请求后,服务器就要对报文进行响应。 <table> <thead> <tr> <th>属性</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>Access-Control-Allow-Origin</td> <td>该站点可以被哪些网站进行 <strong>跨域资源共享</strong><br><br> Access-Control-Allow-Origin: <a href="http://example.com:8080/" rel="nofollow">http://example.com:8080</a> <a href="http://foo.example.com/" rel="nofollow">http://foo.example.com</a><br> Access-Control-Allow-Origin:*</td> </tr> <tr> <td>Accept-Ranges</td> <td>服务器是否支持资源范围请求<br><br> 资源范围请求:指按byte为单位,请求资源的某一段数据<br> 例如请求一个文件的200byte—400byte的数据<br><br> Accept-Ranges:bytes 表示该资源支持byte形式资源范围请求<br> Accept-Ranges:none则表示不支持</td> </tr> <tr> <td>Age</td> <td>一个资源存在于代理中 缓存的时间,单位是秒</td> </tr> <tr> <td>Allow</td> <td>一个资源允许哪些HTTP方法进行请求<br><br> Allow: GET, HEAD<br> Allow:*</td> </tr> <tr> <td>Cache-Control</td> <td> </td> </tr> <tr> <td>Connection</td> <td>连接方式<br><br> Connection:keep-alive<br> Connection:close</td> </tr> <tr> <td>Content-Encoding</td> <td>服务器对响应数据的编码方式,但这里的编码方式不同于编码字符集(GB2312,UTF-8等),而是(通常)指压缩方式<br><br> Content-Encoding:gzip</td> </tr> <tr> <td>Content-Language</td> <td>响应数据的自然语言<br><br> Content-Language:ZH-CN</td> </tr> <tr> <td>Content-Length</td> <td>响应数据的数据长度,单位是byte<br><br> Content-Length:1024</td> </tr> <tr> <td>Content-Location</td> <td> </td> </tr> <tr> <td>Content-MD5</td> <td>基于base64编码的回应数据的MD5校验和<br><br> Content-MD5: Q2hlY2sgSW50ZWdyaXR5IQ==</td> </tr> <tr> <td>Content-Disposition</td> <td>当客户端请求的资源是一个可下载的资源(这里的“可下载”是指浏览器会弹出下载框或者下载界面)时,对这个可下载资源的描述(例如下载框中的文件名称)就是来源于该头域。<br><br> Content-Disposition: attachment; filename=”some_app.exe”</td> </tr> <tr> <td>Content-Range</td> <td>如果当前这个响应数据是整个资源的一部分时,是具体的哪一部分(从第几byte到第几byte)。<br> 在请求中,客户端可以通过设定”Range”头域来通知服务器其只想请求整个资源中某一段数据,而对应的,当服务器响应这种请求,并发送某一段数据到客户端的时候,必须通过Content-Range头来告诉客户端当前的响应数据是整个资源的第几byte到第几byte。这个在资源的分段下载和续点下载应用中很有用。<br><br> Content-Range:500-900</td> </tr> <tr> <td>Content-Type</td> <td>服务器告诉浏览器它发送的数据属于什么文件类型,也就是响应数据的MIME类型<br><br> Content-Type: text/html; charset=utf-8,让浏览器把接收到的实体内容以HTML格式解析<br> Content-Type: text/plain; charset=utf-8,让浏览器把接收到的实体内容以普通文本解析</td> </tr> <tr> <td>Date</td> <td>响应消息发送的GMT格式日期<br><br> Date: Tue, 15 Nov 1994 08:12:31 GMT</td> </tr> <tr> <td>ETag</td> <td>资源的一个标识,类似于key-value pair(键值对)中的key。<br> ETag通常用于校验一个资源实体有没有被修改过。<br> 在数据缓存和PUT方法更新资源时候有用处。<br><br> ETag: “737060cd8c284d8af7ad3082f209582d”</td> </tr> <tr> <td>Expires</td> <td>告诉客户端该响应数据会在指定的时间过期,通常用于给客户端缓存作为参考。<br><br> Expires: Thu, 01 Dec 1994 16:00:00 GMT</td> </tr> <tr> <td>Last-Modified</td> <td>客户端所请求的资源的最后修改时间。</td> </tr> <tr> <td>Link</td> <td>描述当前被请求的资源和另外一个资源的关系。这种关系被定义在RFC5988。<br><br> Link: ; rel=”alternate”</td> </tr> <tr> <td>Location</td> <td>用户通知客户端转跳(重定向)到另一个URL<br><br> Location: <a href="http://www.w3.org/pub/WWW/People.html" rel="nofollow">http://www.w3.org/pub/WWW/People.html</a></td> </tr> <tr> <td>P3P</td> <td>Platform for Privacy Preferences Project的缩写,表示本站点遵守P3P协议(标称本站点不会违法使用用户信息)并希望收集用户信息。不过P3P目前使用并不广泛,特别国内并不重视P3P。<br><br> P3P:CP=”your_compact_policy”。</td> </tr> <tr> <td>Pragma</td> <td>在请求/响应链上附近的一些参数</td> </tr> <tr> <td>Proxy-Authenticate</td> <td>访问代理时需要使用的验证方式。<br><br> Proxy-Authenticate: Basic</td> </tr> <tr> <td>Refresh</td> <td>用于令客户端在指定N秒后转跳到另外一个URL。<br><br> Refresh:6,<a href="http://www.google.com.hk/" rel="nofollow">http://www.google.com.hk</a> 6秒后转跳到google</td> </tr> <tr> <td>Retry-After</td> <td>用于因为某些原因(例如该资源暂时无效)通知客户端在指定时间后重新尝试请求,时间单位为秒。<br><br> Retry-After:60 一分钟后重新尝试请求该资源。</td> </tr> <tr> <td>Server</td> <td>服务器的名称<br><br> Server: Apache/2.4.1 (Unix)</td> </tr> <tr> <td>Set-Cookie</td> <td>对客户端设置cookie<br><br> Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1</td> </tr> <tr> <td>Strict-Transport-Security</td> <td>用于指示客户端如何对HTTPS进行缓存(缓存多长时间)以及是否对子域生效。<br><br> Strict-Transport-Security: max-age=16070400; includeSubDomains</td> </tr> <tr> <td>Trailer</td> <td>当响应资源已chunked编码传输时,每个Chunked-Body尾部的额外数据。</td> </tr> <tr> <td>Transfer-Encoding</td> <td>响应内容的传输编码方式,通常有 chunked, deflate, gzip等。</td> </tr> <tr> <td>Vary</td> <td> <p>用来指示缓存代理(例如squid)根据什么条件去缓存一个请求。<br><br> Vary: Accept-Encoding<br> Vary: Accept-Encoding,User-Agent<br> Vary: X-Some-Custom-Header,Host Vary: *</p> <p>Vary:Origin; 告诉CDN等,响应是基于请求者Origin头值进行协商的;CORS 请求会带上 Origin请求头,用来向别人的网站表明自己是谁 ,根据Access-Control-Allow-Origin 联系的</p> </td> </tr> <tr> <td>Via</td> <td>告诉客户端,该回应经历了那些代理。<br><br> Via: 1.0 <a href="http://example1.com/" rel="nofollow">example1.com</a>, 1.1 <a href="http://example2.com/" rel="nofollow">example2.com</a> (Apache/1.1)</td> </tr> <tr> <td>WWW-Authenticate</td> <td> <p>表示当前是用什么验证方式访问一个资源。</p> <p><br> WWW-Authenticate:base</p> <p> </p> </td> </tr> </tbody> </table> X-Powered-By:服务器告知客户机网站是用何种语言或框架编写的。 Header属性分类 1、通用信息头 即能用于请求消息中,也能用于响应信息中,但与被传输的实体内容没有关系的信息头,如Data,Pragma 主要: Cache-Control , Connection , Data , Pragma , Trailer , Transfer-Encoding , Upgrade 2、请求头 用于在请求消息中向服务器传递附加信息,主要包括客户机可以接受的数据类型,压缩方法,语言,以及客户计算机上保留的信息和发出该请求的超链接源地址等. 主要: Accept , Accept-Encoding , Accept-Language , Host , 3、响应头 用于在响应消息中向客户端传递附加信息,包括服务程序的名称,要求客户端进行认证的方式,请求的资源已移动到新地址等. 主要: Location , Server , WWW-Authenticate(认证头) 4、实体头 用做实体内容的元信息,描述了实体内容的属性,包括实体信息的类型,长度,压缩方法,最后一次修改的时间和数据的有效期等. 主要: Content-Encoding , Content-Language , Content-Length , Content-Location , Content-Type 5、扩展头 主要:Refresh, Content-Disposition # 四. Access-Control-Allow-Origin,跨域 # ## 4.1、浏览器的同源安全策略 ## 浏览器只允许请求当前域的资源,而对其他域的资源表示不信任。那怎么才算跨域呢? 1. 请求协议`http,https`的不同 2. 域`domain`的不同 3. 端口`port`的不同 大概就是这么回事啦,下面我们讲2种中规中矩的办法:`CORS`,`JSONP` document.domain,window.name,web sockets暂不深究 : ) ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1][] ## 解决跨域的方法? ## 1 .jsonp --使用script 的src 发送 只能是get请求 2.cors 后台设置运行跨域 所有的后台语言都可以设置 3.服务器代理 ## 4.2、CORS ## 全称是"跨域资源共享"(Cross-origin resource sharing)。其实呢,这个大部分还是后端人员的工作。我们先来看看整个流程下,都发生了什么? 在此之前,需要知道`简单请求` `复杂请求`这两个小朋友 1. 简单请求: 1): 请求方式只能是:`head`,`get`,`post` 2): 请求头允许的字段:`Accept`,`Accept-Language`,`Content-Language`,`Last-Event-ID` `Content-Type`:application/x-www-form-urlencoded、multipart/form-data、text/plain 三选一 2.复杂请求:不满足上面的情况 简单请求: 浏览器:要跨域,问服务器大哥肯不肯!往请求头添加`origin`亮一下牌面 `有个奇怪现象,谷歌游览器在非跨域情况下,也会发送origin字段` ![f63a693e51656306cbd9e1b692e858a2.webp][] 请求头origin字段为当前域 服务器:诶,你是谁,我来看看你的origin,嗯嗯,可以,符合我的要求,放行!顺便告诉你,老夫的规矩! ![ccfab9fc93c2687a73796324eade8fe5.webp][] 其中,最重要的就是`Access-Control-Allow-Origin`,标识允许哪个域的请求。当然,如果服务器不通过,根本没有这个字段,接着触发`XHR`的`onerror`,再接着你就看到浏览器的提示`xxx的服务器没有响应Access-Control-Allow-Origin字段` //指定允许其他域名访问 'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法(*,指定域,动态设置),3是因为*不允许携带认证头和cookies //是否允许后续请求携带认证信息(cookies),该值只能是true,否则不返回 'Access-Control-Allow-Credentials:true' 上面第一行说到的`Access-Control-Allow-Origin`有多种设置方法: 1. 设置`*`是最简单粗暴的,但是服务器出于安全考虑,肯定不会这么干,而且,如果是\*的话,游览器将不会发送`cookies`,即使你的`XHR`设置了`withCredentials` 2. 指定域,如上图中的`http://172.20.0.206`,一般的系统中间都有一个`nginx`,所以推荐这种 3. 动态设置为请求域,多人协作时,多个前端对接一个后台,这样很方便 `withCredentials`:表示`XHR`是否接收cookies和发送cookies,也就是说如果该值是false,响应头的`Set-Cookie`,浏览器也不会理,并且即使有目标站点的cookies,浏览器也不会发送。 **复杂请求:** 最常见的情况,当我们使用`put`和`delete`请求时,浏览器会先发送`option`(预检)请求,不过有时候,你会发现并没有,这是后面我们会讲到缓存。 **预检请求** 与简单请求不同的是,option请求多了2个字段: `Access-Control-Request-Method`:该次请求的请求方式 `Access-Control-Request-Headers`:该次请求的自定义请求头字段 服务器检查通过后,做出响应: //指定允许其他域名访问 'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法(*,指定域,动态设置),3是因为*不允许携带认证头和cookies //是否允许后续请求携带认证信息(cookies),该值只能是true,否则不返回 'Access-Control-Allow-Credentials:true' //预检结果缓存时间,也就是上面说到的缓存啦 'Access-Control-Max-Age: 1800' //允许的请求类型 'Access-Control-Allow-Methods:GET,POST,PUT,POST' //允许的请求头字段 'Access-Control-Allow-Headers:x-requested-with,content-type' 这里有个注意点:`Access-Control-Request-Method`,`Access-Control-Request-Headers`返回的是满足服务器要求的所有请求方式,请求头,不限于该次请求,`我一次性告诉你了,别TM问我了` **后端设置跨域的时候**: 浏览器的跨域,就是ip+端口是否跨域,深入点就是服务器指向内容地址是否同级,这个同级的概念,就是服务器都可以访问到的地址根目录 后端做了 跨域 处理,前端不用做跨域。后端做的跨域 在请求接口 的时候,可以看到如下,如果后端没有运行跨域的话,没有 Access-Control-Allow-Origin 返回 比如 php: <?php header('Access-Control-Allow-Origin:*'); header('Access-Control-Allow-Methods:GET,POST,PUT,POST'); ?> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2][] ## 4.3、jsonp ## jsonp的原理:通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入,有种回调的味道! 例子: <script src="http://example.com/data.php?callback=dosomething"></script> <script type="text/javascript"> function dosomething(jsondata){ //处理获得的json数据 } </script> jquery用法 <script type="text/javascript"> $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){ //处理获得的json数据 }; </script> JSONP的优缺点 优点:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的`兼容性更好`,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。 缺点:它只支持`GET`请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。 ## 4.4 meta 里面控制的 ## [https://www.fujieace.com/html/cors.html][https_www.fujieace.com_html_cors.html] ## 4.5 Webpack Proxy工作原理 (反向代理) ## webpack添加proxy,也是nodejs做服务代理,还是为了服务端做处理。 **首先强调的是webpack proxy只能用作于开发阶段,临时解决本地请求服务器(通常是测试服)产生的跨域问题,并不适用线上环境**。配置在webpack的 `devServer` 属性中。 有人可能会误会线上环境就是正式服,曾就有人利用process.env.NODE_ENV来区分测试服和生产服。 其实不然。 对于node_env来说,默认只有两种状态即development和production,前者指代本地开发即localhost环境,而后者代表发布在任何服务上的服务,node是不知道你服务是测试还是正式,除非你手动指定。通常认为都是线上环境。 ## 设置 proxy 目的 ## 为解决在本地开发时XHR异步请求跨域问题(如果你的后端小伙伴愿意给你处理,无需配置) ## 原理 ## webpack中的`proxy`只是一层代理,用于把指定的`path`,代理去后端提供的地址,背后使用node来做server。可能有人疑惑,为什么只适用本地开发?因为该技术只是在webpack打包阶段在本地临时生成了node server,来实现类似nginx 的`proxy_pass`的反向代理效果 `proxy`工作原理实质上是利用`http-proxy-middleware` 这个http代理中间件,实现请求转发给其他服务器。例如:本地主机A为`http://localhost:3000`,该主机浏览器发送一个请求,接口为`/api`,这个请求的数据(响应)在另外一台服务器B`http://10.231.133.22:80`上,这时,就可以通过A主机设置webpack proxy,直接将请求发送给B主机。 var express = require('express'); var proxy = require('http-proxy-middleware'); var app = express(); app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true})); app.listen(3000); // http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar 必须配置**`changeOrigin= true`** ## 核心概念 ## var proxy = require('http-proxy-middleware'); var apiProxy = proxy('/api', {target: 'http://www.example.org'}); // \____/ \_____________________________/ // | | // context options * **content:**用于定义哪些请求需要被目标主机代理 * **option.target:**目标主机(协议+主机名) 也可以简写 `var apiProxy = proxy('http://www.example.org/api');` **option的几种配置** `option.pathRewrite`: 重写目标的url路径,`key`用正则表达式来匹配路径 // 重写路径 pathRewrite: {'^/old/api' : '/new/api'} // 移除路径 pathRewrite: {'^/remove/api' : ''} // 添加基础路径 pathRewrite: {'^/' : '/basepath/'} // 路径自定义 pathRewrite: function (path, req) { return path.replace('/api', '/base/api') } **vue 使用过程中设置:** **a 浏览器https://****localhost:8080 b的后端**[http://172.16.10.21:8001][http_172.16.10.21_8001] ,接口地址是:[http://172.16.10.21:8001][http_172.16.10.21_8001]/xs/setName **1.请求接口** 如果没有跨域的时候,直接这样请求 axios.get('http://172.16.10.21:8001/xs/setName') .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); 现在设置跨域代理 分析: /api 代替了 http://172.16.10.21:8001 /api/xs/setName 表示: http://172.16.10.21:8001/xs/setName axios.get('/api/xs/setName') .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); vue.config.js // 代理服务 devServer: { port: 8080, // 端口号 host: 'localhost', open: true, //配置自动启动浏览器 proxy: { '/api': { target: 'http://172.16.10.21:8001',//接口的域名 changeOrigin: true,//运行跨域 ws: true, pathRewrite: { "^/api": "" } } } }, **总结:** webpack proxy做代理,是相当于找了个中间对象,第三者做host这块转发,也是nodejs做服务代理,还是为了服务端做处理。 Java是直接给你跨域的权限,相当于http协议层面,允许你跨域,浏览器不做拦截。 proxy基于本地服务做的跨域,打包成静态资源后,就没有nodejs服务了。所以如果上线了,proxy代理就没啥用了, 如打包成静态资源放在跟后端是同一个服务器的话,那就没有跨域的问题,如没有在一起的话,那后端要必须要设置允许跨域。 # 六.材料 # [跨域资源共享 CORS 详解][CORS], [前端和后端解决跨域问题][Link 1] [vue中proxyTable反向代理进行跨域][vue_proxyTable] [Webpack Proxy工作原理(本地跨域)][Webpack Proxy] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/d57be8619a7248a58a7e4ac7df0638c0.png [http_www.hzau.edu.cn]: http://www.hzau.edu.cn/ [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1]: /images/20210813/7828dc328c9946d39017e23b23ff64f0.png [f63a693e51656306cbd9e1b692e858a2.webp]: /images/20210813/c7dcf9e25c984504bfebf6630983c871.png [ccfab9fc93c2687a73796324eade8fe5.webp]: /images/20210813/1075bc5494ae4ae69f830c614806b1da.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 2]: /images/20210813/8af067fc8cf541a9824614a5d446e04e.png [https_www.fujieace.com_html_cors.html]: https://www.fujieace.com/html/cors.html [http_172.16.10.21_8001]: http://172.16.10.21:8001 [CORS]: https://link.jianshu.com?t=http%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2016%2F04%2Fcors.html [Link 1]: https://blog.csdn.net/qlin_11/article/details/99302292 [vue_proxyTable]: https://blog.csdn.net/gao_xu_520/article/details/80407049 [Webpack Proxy]: https://www.jianshu.com/p/8fd5d7347c57
相关 【跨域】如何解决跨域问题 同源策略 同源 相同协议+相同域名+相同端口 内容 [浏览器的同源策略 - Web 安全 | MDN (mozilla.org)][- Web _ _ 超、凢脫俗/ 2024年03月16日 13:32/ 0 赞/ 124 阅读
相关 跨域、跨域问题 跨域(CORS)是一种允许当前域(domain)的资源(比如html/js/web service)被其他域(domain)的脚本请求访问的机制,通常由于同域安全策略(the 朴灿烈づ我的快乐病毒、/ 2023年09月27日 00:59/ 0 赞/ 194 阅读
相关 跨域问题 跨域问题 跨域 请求协议不一致导致 IP地址的不一致导致 端口不一致导致 跨域 跨域问题普遍存在前后端分离得开发模式 我会带着你远行/ 2022年12月20日 01:57/ 0 赞/ 215 阅读
相关 跨域问题 跨域问题: 通过一个地址去访问另一个地址,这个过程中如果有三个地方任何一个不一样,都会有跨域问题 访问协议:http https ip地址 192.168.1.1 冷不防/ 2022年11月17日 14:49/ 0 赞/ 248 阅读
相关 跨域问题 要解决跨域问题先来看看什么是同源策略。 同源策略 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源。 下表给出了相对`http://s 川长思鸟来/ 2022年03月12日 06:27/ 0 赞/ 313 阅读
相关 跨域问题 确实,我们这种搬砖工人就是为了混口饭吃嘛,好好的调个接口告诉我跨域了,这种阻碍我们轻松搬砖的事情真恶心!为什么会跨域?是谁在搞事情?为了找到这个问题的始作俑者,请 ゝ一世哀愁。/ 2022年01月14日 13:01/ 0 赞/ 351 阅读
相关 跨域问题 跨域是个老生常谈的跨题。今天在我们后端的帮助和配合下,对跨域又多了一层认识。感觉对于每件事,只要是从3个方面(what,why,how)去理解,都会对其有个基本(70 r囧r小猫/ 2022年01月06日 13:43/ 0 赞/ 326 阅读
相关 跨域问题 1、浏览器的同源安全策略 没错,就是这家伙干的,浏览器只允许请求当前域的资源,而对其他域的资源表示不信任。那怎么才算跨域呢? 1. 请求协议`http,https`的 约定不等于承诺〃/ 2021年09月28日 14:54/ 0 赞/ 438 阅读
相关 跨域问题 一.http (一).http请求的推演过程 1. url(www.baidu.com) =>进行DNS域名解析 => 得到 ip (192.1 一时失言乱红尘/ 2021年09月03日 08:04/ 0 赞/ 695 阅读
相关 跨域问题 使用vue访问springboot java后台api时候,出现错误: 已拦截跨源请求:同源策略禁止读取位于 https://xxxxi/xxx/xx/xxxi/ad 痛定思痛。/ 2021年09月01日 04:42/ 0 赞/ 521 阅读
还没有评论,来说两句吧...