二手车网站系统网站建设6135678

二手车网站系统,网站建设6135678,做销售找客户渠道,企业年金辞职了就白交了吗跨域#xff08;CORS#xff09;原因及解决方案 文章目录跨域#xff08;CORS#xff09;原因及解决方案什么是跨域#xff1f;浏览器的同源策略什么是跨域#xff1f;如何解决跨域JSONP#xff08;比较老的方法#xff0c;不推荐#xff09;CORS #xff08;服务器端…跨域CORS原因及解决方案文章目录跨域CORS原因及解决方案什么是跨域浏览器的同源策略什么是跨域如何解决跨域JSONP比较老的方法不推荐CORS 服务器端设置浏览器跨域配置开发阶段测试使用webpack/vite 等工程化工具中配置什么是跨域浏览器的同源策略浏览器有一个重要的安全机制叫 同源策略Same-Origin Policy。它的意思是浏览器只允许网页向和自己“同源”的地址发送请求否则就拦截。同源的定义是协议http/ https、域名或 IP、端口号 三者完全相同。假设你的网页地址是http://localhost:3000/index.html目标地址目标地址是否同源原因http://localhost:3000/api/data✅同源协议、域名、端口号都一样https://localhost:3000/api/data❌不同源协议不同https httphttp://127.0.0.1:3000/api/data❌不同源域名不同localhost 127.0.0.1什么是跨域当你访问一个不同源的接口时浏览器会因为同源策略阻止这个请求这就是跨域。通常控制台会出现这样的错误如何解决跨域JSONP比较老的方法不推荐解决方法浏览器生成一个script元素访问数据接口服务器响应一段js代码调用某个函数并把响应数据传入前端代码functionjsonp(url){constscriptdocument.createElement(script);script.srcurl;// 为了不影响页面script加载过后将其移除script.addEventListener(load,(){script.remove();)}jsonp(请求的url地址);// 服务器返回的js函数functioncallback(data){console.log(data);}服务器端代码router.get(/,async(req,res){constresultawaitstuServ.getStudents();res.status(200).send(getResult(result));// jsonp 实现跨域// 首先将 content-type的值设置为 “application/javascript”// 修改返回的数据将数据放入到callback函数中res.header(content-type,application/javascript).send(callback(${JSON.stringify(result)}));});JSONP的问题会打乱服务器的消息格式jsonp要求服务器响应js代码但是在非跨域情况下服务器又需要响应一个正常的json合适。只能完成GET请求浏览器的script标签发出的请求只能是get请求。CORS 服务器端设置CORS是基于http1.1的一种跨域解决方案它的全称是Cross-Origin Resource Sharing跨域资源共享。总体思路如果浏览器要跨域访问服务器资源需要获得服务器的允许。三种不同的交互模式简单请求需要同时满足的条件请求方法属于getpost head 中的一种请求头仅包含安全的字段常见安全字段如下AcceptAccept-languageContent-TypeContent-languageDPRDownLinkSave-DataViewport-WidthWidth请求头如果包含 Content-Type值只能为text/plainmultipart/form-dataapplication/x-www-form-urlencoded当浏览器判定某个ajax请求为简单请求时会在请求头中自动添加Origin字段告诉服务器是哪个源地址在跨域请求服务器响应头中应该包含Access-Control-Allow-Origin允许跨域请求代码实现constallowOrigins[origin1,origin2,...];if(origininreq.headersallowOrigins.includes(req.headers.origin)){res.header(access-control-allow-origin,req.headers.origin);}需要预检的请求若浏览器判定ajax请求不是一个简单的请求就会按照下面的流程进行浏览器发送预检请求OPTIONS询问服务器是否允许服务器允许浏览器发送真实请求服务器完成真实响应例如有一个需要预检的跨域请求fetch(http://myRequest.com/api/test,{method:POST,header:{Content-Type:application/json,a:a,b:b},body:JSON.stringify({name:abc,age:18})}).then(resres.json()).then(dataconsole.log(data));此时浏览器会发送一个预检请求询问服务器是否允许预检请求有以下特征请求方法为OPTIONS没有请求体请求头中包含Origin请求的源和简单请求的含义一致Access-Control-Request-Method后续的真实请求将使用的请求方法Access-Control-Request-Headers后续的真实请求会改动的请求头若服务器允许需要在请求头中添加Access-Control-Allow-Method: 允许的后续真实请求Access-Control-Allow-Headers: 允许改动的请求头Access-Control-Allow-Origin允许的源Access-Control-Max-Age告诉浏览器多少秒内对于同样的请求源、方法、头都不需要再发送预检请求了示例代码constallowOrigins[origin1,origin2,...];if(req.methodOPTIONS){res.header(Access-Control-Allow-Methods,req.header(access-control-request-method));res.header(Access-Control-Allow-Headers,req.header(access-control-request-headers));}if(origininreq.headersallowOrigins.includes(req.headers.origin)){res.header(access-control-allow-origin,req.headers.origin);}附带身份凭证的请求有一些场景需要请求携带cookie只需要在响应头中添加Access-Control-Allow-Credentials: true即可。对于一个附带身份凭证的请求若服务器没有明确告知浏览器仍然视为跨域被拒绝。note:对于跨域请求nodejs中可以使用 cors库来实现也可以自己封装跨域的中间件。浏览器跨域配置开发阶段测试使用谷歌浏览器为例1. 新建目录如C:\MyChromeDevUserData。‌‌2. 右键快捷方式→属性→在“目标”字段末尾添加 --disable-web-security --user-data-dirC:\MyChromeDevUserData注意参数前有空格。‌‌若原目标值带引号参数需加在引号外。‌‌webpack/vite 等工程化工具中配置module.exports{// 其他配置...devServer:{// 其他devServer配置...proxy:{/api:{target:http://example.com,// 目标服务器地址changeOrigin:true,// 是否改变源地址pathRewrite:{^/api:},// 重写路径// 其他代理配置...}}}};