优对 网站开发,柳州小程序制作公司,招聘公司怎么做网站,国内wordpress主题商默认情况下#xff0c;出于安全考虑#xff0c;浏览器会实施同源策略#xff0c;阻止网页向不同源的服务器发送请求或接收来自不同源的响应。 同源策略#xff1a;协议、域名、端口三者必须保持一致 !DOCTYPE html
html langen
head出于安全考虑浏览器会实施同源策略阻止网页向不同源的服务器发送请求或接收来自不同源的响应。 同源策略协议、域名、端口三者必须保持一致 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://cdn.staticfile.net/jquery/3.7.1/jquery.min.js/script
/head
bodybutton idbtnGetget请求/buttonbutton idbtnPostpost请求/buttonscript$(#btnGet).on(click, function(){console.log(点击get请求)$.ajax({type: GET,url: http://127.0.0.1:3000/api/get,data: {name: lbj,number: 23},success: (res) {console.log(res, get请求成功)}})})$(#btnPost).on(click, function(){console.log(点击post请求)$.ajax({type: POST,url: http://127.0.0.1:3000/api/post,data: {name: lbj,number: 23},success: (res) {console.log(res, get请求成功)}})})/script
/body
/html常见的解决跨域请求的方法
CORS跨源资源共享JSONP代理服务器Nginx反向代理
CORS的实现原理
CORS的核心原理是通过在HTTP响应头中添加特定的CORS相关字段告诉浏览器哪些域名是被允许的从而解决跨域请求的问题。这些字段包括
Access-Control-Allow-Origin指定允许访问的域名。可以是单个域名也可以是逗号分隔的多个域名或者使用通配符*表示允许所有域名访问。
Access-Control-Allow-Methods指定允许的HTTP方法。例如GET、POST等。
Access-Control-Allow-Headers指定允许的HTTP头部。例如Content-Type等。
Access-Control-Allow-Credentials表示是否允许发送包含凭据的请求如Cookie。默认情况下不发送凭据。
Access-Control-Expose-Headers指定哪些HTTP头部可以被浏览器访问。CORS实现方法
// 安装中间件
// npm install cors
// 导入中间件
const cors require(cors)
// 配置中间件要在路由之前
app.use(cors())CORS的优缺点 优点 标准化CORS是W3C标准被广泛支持。 灵活性可以通过配置允许特定的源、方法和头。 安全性可以明确指定哪些资源可以被跨域访问。 缺点 配置复杂性需要仔细配置CORS策略以确保安全性和功能性。 浏览器兼容性虽然现代浏览器都支持CORS但某些旧版本浏览器可能不支持或支持不完全。 jsonp的实现方法
JSONP是一种通过script标签的src属性来实现跨域请求的技术。由于script标签不受同源策略的限制因此可以加载不同源的脚本。JSONP通常用于GET请求。
jsonp的优缺点 优点 兼容性JSONP在旧版本浏览器中也被广泛支持。 简单易用实现起来相对简单不需要额外的中间件或配置。缺点 安全性JSONP存在安全风险因为它允许跨域执行脚本。 局限性只支持GET请求不支持POST等其他HTTP方法。 jsonp的实现
// html
button idbtnJsonpjsonp请求/button// javascript
$(#btnJsonp).on(click, function(){console.log(点击jsonp请求)$.ajax({method: GET,url: http://127.0.0.1:3000/api/jsonp,dataType: jsonp, success: (res) {console.log(res, jsonp请求成功)}})
})// 服务端
router.get(/jsonp, (req, res){// 获取客户端发送过来的回调函数的名字const funcName req.query.callback;// 发送给客户端的数据const data {name: lbj, number: 23}// 拼接函数回调的字符串const str ${funcName}(${JSON.stringify(data)})res.send(str)
})代理服务器
实现方式代理服务器充当客户端和目标服务器之间的中介。客户端向代理服务器发起请求代理服务器再将请求转发给目标服务器并将响应返回给客户端。通过这种方式可以绕过浏览器的同源策略。 优点 灵活性可以处理各种跨域请求包括POST等HTTP方法。 安全性可以通过代理服务器进行身份验证和授权。 缺点 实现复杂性需要设置和维护代理服务器。 性能影响代理服务器可能会增加请求延迟和带宽消耗。 Nginx反向代理
实现方式通过Nginx配置反向代理将跨域请求转发到Node.js应用。 优点 性能Nginx是一个高性能的HTTP服务器和反向代理服务器。 安全性可以通过Nginx进行SSL/TLS加密和身份验证。 缺点 配置复杂性需要熟悉Nginx的配置和管理。 依赖性需要额外的Nginx服务器。
