宝塔做两个网站6,空间里怎么放多个网站,网站建设要注意一些什么,网站建设 镇江什么是跨域#xff1f;
**说起跨域#xff0c;就要知道什么是浏览器同源策略
**浏览器同源策略#xff1a;必须是协议、域名、端口完全一致的才符合同源策略
**如果以上三项#xff0c;有一项不同都涉及到跨域问题 为什么浏览器要设置同源策略呢#xff1f;
没有同源策…什么是跨域
**说起跨域就要知道什么是浏览器同源策略
**浏览器同源策略必须是协议、域名、端口完全一致的才符合同源策略
**如果以上三项有一项不同都涉及到跨域问题 为什么浏览器要设置同源策略呢
没有同源策略限制的两大危险场景 浏览器是从两个方面去做这个同源策略的一是针对接口的请求二是针对Dom的查询。
没有同源策略限制的接口请求
没有同源策略限制的接口请求通常是因为开发者或服务器管理员采取了特定的措施来绕过或放宽同源策略的限制。同源策略是浏览器的一个安全机制它限制了一个网页只能与其来源相同的网页进行交互。这里的“来源”指的是协议、域名和端口都必须相同。
通常涉及前端应用程序与后端服务之间的通信特别是在这些服务位于不同源即不同的协议、域名或端口时。以下是一些可能导致跨域问题的常见场景1.前端应用和后端API位于不同域名 假设你有一个前端Web应用如https://frontend.example.com与一个后端RESTful API如https://api.example.net进行通信。由于这两个服务位于不同的域名浏览器会应用同源策略阻止前端应用直接访问后端API。2.前端开发环境使用localhost而后端服务位于远程服务器 在开发过程中前端应用可能运行在本地机器上如http://localhost:3000而后端API则部署在远程服务器上如https://dev-api.example.com。由于端口和域名都不同同源策略会阻止这种通信。3.使用第三方API 假设你的应用需要调用某个第三方API如天气API或支付API而这些API位于与你的应用不同的源上。没有适当的跨域设置你的应用将无法与这些API通信。4.使用iframe或popup窗口嵌入内容 当你在一个页面上使用iframe或JavaScript打开的popup窗口嵌入来自其他源的内容时这些内容与主页面之间可能会存在跨域问题。例如你可能希望从iframe或popup中读取或修改主页面上的数据但由于同源策略的限制这通常是不允许的。5.文件协议file://与HTTP/HTTPS之间的通信 如果你在本地通过文件系统如file:///path/to/your/app.html直接打开HTML文件并尝试与HTTP或HTTPS服务器上的服务进行通信这也会触发跨域问题。6.端口号不同 即使域名相同但如果端口号不同如http://example.com与http://example.com:8080也会触发跨域问题。7.协议不同 HTTP和HTTPS被视为不同的源。如果你的前端应用使用HTTP而你的后端API使用HTTPS那么它们之间的通信将受到同源策略的限制。8.本地开发服务器与远程测试环境之间的通信 在开发过程中开发者可能会将代码部署到远程测试环境进行测试但前端应用可能仍在本地运行。这种配置也可能导致跨域问题。 为了解决这些问题开发者可以采用一些技术来允许跨域请求例如CORS跨源资源共享、JSONPJSON with Padding、使用代理服务器、或配置浏览器以允许跨域请求通常仅用于开发环境 跨域解决方案
**1、 通过jsonp跨域 2、 document.domain iframe跨域 3、 location.hash iframe 4、 window.name iframe跨域 5、 postMessage跨域 6、 跨域资源共享CORS 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域**
JSONP跨域
jsonp的原理就是利用script标签没有跨域限制通过script标签src属性发送带有callback参数的GET请求服务端将接口返回数据拼凑到callback函数中返回给浏览器浏览器解析执行从而前端拿到callback函数返回的数据。jsonp 缺点是只能发送 get 请求 1原生JS实现 scriptvar script document.createElement(script);script.type text/javascript;// 传参一个回调函数名给后端方便后端返回时执行这个在前端定义的回调函数script.src http://www.domain2.com:8080/login? useradmincallbackhandleCallback;document.head.appendChild(script);// 回调执行函数function handleCallback(res) {alert(JSON.stringify(res));}/script
服务端返回如下返回时即执行全局函数
handleCallback({success: true, user: admin}) 2jquery Ajax实现
$.ajax({url: http://www.domain2.com:8080/login,type: get,dataType: jsonp, // 请求方式为jsonpjsonpCallback: handleCallback, // 自定义回调函数名data: {}
}); 3Vue axios实现
this.$http axios;
this.$http.jsonp(http://www.domain2.com:8080/login, {params: {},jsonp: handleCallback
}).then((res) {console.log(res);
}) 4node.js实现
var querystring require(querystring);
var http require(http);
var server http.createServer();server.on(request, function(req, res) {var params querystring.parse(req.url.split(?)[1]);var fn params.callback;// jsonp返回设置res.writeHead(200, { Content-Type: text/javascript });res.write(fn ( JSON.stringify(params) ));res.end();
});server.listen(8080);
console.log(Server is running at port 8080...);
CORS跨域资源共享
**CORS 是一种 W3C 规范它定义了一种浏览器和服务器交互的方式来确定是否允许跨源请求。 服务器通过在响应头中添加 Access-Control-Allow-Origin 等字段来告诉浏览器哪些源可以访问其资源。 CORS 支持多种 HTTP 请求方法如 GET、POST、PUT 等。** 1.原生ajax
var xhr new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容// 前端设置是否带cookie
xhr.withCredentials true;xhr.open(post, http://www.domain2.com:8080/login, true);
xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);
xhr.send(useradmin);xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {alert(xhr.responseText);}
}; 2.jQuery ajax
$.ajax({...xhrFields: {withCredentials: true // 前端设置是否带cookie},crossDomain: true, // 会让请求头中包含跨域的额外信息但不会含cookie...
}); 3.vue框架
a.) axios设置axios.defaults.withCredentials trueb.) vue-resource设置Vue.http.options.credentials true 服务器端代理
这种方法通过在服务器端设置一个代理来转发客户端的请求到目标服务器。 代理服务器与目标服务器之间的通信不受同源策略的限制因为它们是服务器端之间的通信。 客户端向代理服务器发送请求代理服务器将请求转发给目标服务器并将目标服务器的响应返回给客户端。 总结来说没有同源策略限制的接口请求通常是通过 JSONP、CORS、服务器端代理、反向代理或负载均衡器等方法来实现的。这些方法各有优缺点开发者需要根据具体场景和需求来选择合适的方法。
