浏览器是如何知道跨域的,解决浏览器跨域问题

跨域意味着浏览器不能运行其他站点的脚本。 这源于浏览器的同构策略，是浏览器对Javascript实施的安全限制。

同源策略限制了下一步行动： COOKIE、LocalStorage和索引数据库不可读

无法获取DOM和JS对象

无法发送Ajax请求

那么什么是同源呢？ 同源是指域名、协议和端口都相同。 如果出现域间问题，控制台将显示以下错误： cross-originrequestblocked : thesameoriginpolicydisallowsreadingtheremoteresourceat http://localhost/users-management/ll

以下是firefox开发者中心关于这个错误的说明，这个说明相当明确。

theresponsetothecorsrequestismissingtherequiredaccess-control-allow-origin header，whichisusedtodeterminewhetherornothethernothethether

If the server is under your control，addtheoriginoftherequestingsitetothesetofdomainspermittedaccessbyaddingittotheaccccess-control

For example，toallowasiteat https://amazing.sitetoaccesstheresourceusingcors，theadershouldbe : access-control-allow-alow

youcanalsoconfigureasitetoallowanysitetoaccessitbyusingthe * wild card.youshouldonlyusethisforpublicapis.privateapishouldnghould andshouldinsteadhaveaspecificdomainordomainsset.in addition，thewildcardonlyworksforrequestsmadewithecrossoriginattributestestion

warning : usingthewildcardtoallowallsitestoaccessaprivateapiisabadidea。

toallowanysitetomakecorsrequestswithoutusingthe * wild card (for example，to enable credentials )， yourservermustreadthevalueoftherequest ' soriginheaderandusethatvaluetosetaccess-control-allow-origin， andmustalsosetavary : originheadertoindicatethatsomeheadersarebeingsetdynamicallydependingontheorigin。

发现问题，设置nginx配置以增加header ' access-control-allow-origin '。 打开nginx配置文件并添加以下节点：

位置~~/users-management/(a-za-z0-9 _-) ) )。

proxy _ set _ headerx-forwarded-for $ remote _ addr；

proxy _ set _ headerx-forwarded-host $ server _ name；

proxy_set_header Host $host；

add _ header ' access-control-allow-origin ' $ http _ origin；

add _ header ' access-control-allow-credentials ' ' true '；

add _ header ' access-control-allow-methods ' ' get，POST，OPTIONS '；

add _ header ' access-control-allow-headers ' ' DNT，X-CustomHeader，Keep-Alive，User-Agent，x -请求

proxy _ pass http://localhost :8081；

}

上述功能将用户管理请求转发到名为后端http://localhost:8081的服务进行处理，并在响应标头中显示上述设置的“访问控制-警报”

这样设定后，域间的问题解决了吗？ 用vue.js axios写程序验证一下吧。 结果表明，用户管理相关的GET请求可以正常访问。 但是，开机自检请求报告了上述域间错误。 为什么开机自检请求会出现错误呢？ 从网络交互可以看出，在开机自检通信之前，axios会先发送选项请求来Say Hello。 因此，可以在nginx上设置选项，以便在收到选项请求时，也可以将' access-control-allow-添加到响应标头中

具体而言，设置位置~ ^/users-management/(a-za-z0-9 _-) )。

if ($request_method='OPTIONS ' ) {

add _ header ' access-control-allow-origin ' * '；

add _ header ' access-control-allow-methods ' ' get，POST，OPTIONS '；

#

# customheadersandheadersvariousbrowsers * should * beokwithbutaren ' t

#

add _ header ' access-control-allow-headers ' ' DNT，X-CustomHeader，Keep-Alive，User-Agent，x -请求

#

# tellclientthatthispre-flightinfoisvalidfor 20 days

#

add _ header ' access-control-max-age ' 1728000；

add _ header ' content-type ' ' text/plain charset=utf-8 '；

add_header 'Content-Length' 0；

返回204；

}

proxy _ set _ headerx-forwarded-for $ remote _ addr；

proxy _ set _ headerx-forwarded-host $ server _ name；

proxy_set_header Host $host；

add _ header ' access-control-allow-origin ' $ http _ origin；

add _ header ' access-control-allow-credentials ' ' true '；

add _ header ' access-control-allow-methods ' ' get，POST，OPTIONS '；

add _ header ' access-control-allow-headers ' ' DNT，X-CustomHeader，Keep-Alive，User-Agent，x -请求

proxy _ pass http://localhost :8081；

}

设置完成后，您会发现可以从axios成功调用开机自检请求。