跨域
文章平均质量分 69
Anita-Sun
一只热衷于分享前端知识的奶牛猫~ ️
展开
-
浏览器的同源政策及其规避方法
含义同源:协议相同域名相同端口相同限制范围Cookie、LocalStorage 和 IndexDB 无法读取DOM 无法获得AJAX 请求不能发送document.domain一级域名相同,二级域名不同Cookie只有同源的网页才可以共享两个网页一级域名相同,只是二级域名不同,浏览器允许通过设置 document.domain 共享 Cookie适用于 Cookie 和 iframe例A 网页:http://w1.example.com/a.htmlB 网原创 2021-12-01 11:39:59 · 248 阅读 · 0 评论 -
ajax跨域
简介ajax 跨域只是浏览器"同源策略"中的一部分ajax 跨域的原理原创 2021-12-01 11:39:01 · 200 阅读 · 0 评论 -
使用 window.postMessage 解决窗口间通信
test.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>first electron</title> <script> function se.原创 2021-11-13 10:47:38 · 5578 阅读 · 0 评论 -
用nodejs搭建代理服务器
代理服务器的原理案例安装 express、http-proxy-middlewareapp.js 文件 node app.jsvar express = require('express');var app = express();app.use(express.static('./public'));app.listen(3000);在 public 文件夹下建立 a.html<!DOCTYPE html><html lang="en"><hea原创 2021-11-29 14:56:19 · 7579 阅读 · 1 评论 -
Node 环境下 axios 的 proxy 配置—— https-proxy-agent
app.js 端口号 3000 node app.jsvar express = require('express');const path = require('path');const axios = require("axios");const HttpsProxyAgent = require("https-proxy-agent");var app = express();app.set('port', 3000);app.get('/', function(re.原创 2021-11-29 10:41:06 · 11617 阅读 · 0 评论 -
window.name + iframe 解决跨域问题
window.name + iframeB.html<body> <script> window.name = '珠峰培训'; </script></body>A.html<iframe src="http://127.0.0.1:1002/NAME/B.html" id="iframe" style="display: none;"></iframe><script> let count = 0;原创 2021-06-17 08:45:41 · 1314 阅读 · 0 评论 -
location.hash + iframe 解决跨域问题
location.hash + iframeA和C同源,A和B非同源页面A<iframe id="iframe" src="http://127.0.0.1:1002/B.html" style="display:none;"></iframe><script> let iframe = document.getElementById('iframe'); // => 向B.html传hash值 iframe.onload = function() {原创 2021-06-17 08:31:31 · 569 阅读 · 0 评论 -
用 document.domain + iframe实现跨域
document.domain + iframe只能实现同一个主域,不同子域之间的操作v.qq.com和sports.qq.com是在同一个主域父页面A<iframe src="http://www.zhufengpeixun/B.html"></iframe><script> document.domain = 'zhufengpeixun.cn'; var user = 'admin';</script>子页面B<script&原创 2021-06-17 08:08:02 · 655 阅读 · 0 评论 -
postMessage解决跨域问题
开放静态资源可以分别获取端口下的所有资源server1.jslet express = require('express'), app = express();app.listen(1001, _ => { console.log('OK!');});app.use(express.static('./'));server2.jslet express = require('express'), app = express();app.listen(1002, _ => .原创 2021-06-17 00:08:08 · 407 阅读 · 0 评论 -
WebSocket解决跨域问题
这种方式本质没有使用HTTP响应头,因此也没有跨域的限制前端部分:<script> let socket = new WebSocket("ws://localhost:8080"); socket.onopen = function() { socket.send("秋风的笔记"); }; socket.onmessage = function(e) { console.log(e.data); };</script>后端部分:con.原创 2021-06-16 00:00:01 · 10365 阅读 · 1 评论 -
Nginx反向代理
Nginx 简介Nginx是一个高性能的HTTP和反向代理服务器,特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好Nginx专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率,能经受高负载的考验特点:反向代理正向代理:在客户端配置代理服务器,通过代理服务器进行互联网访问反向代理:将请求发送到反向代理服务器,由反向代理服务器去选择目标服务器获取数据后,再返回给客户端。此时反向代理服务器和目标服务器对外就是一个服务器,暴露的是代理服务器原创 2021-06-15 23:42:59 · 291 阅读 · 2 评论 -
webpack中解决跨域问题
客户端请求import axios from 'axios';axios.get('/user/list').then(res => { consoel.log(res);});webpack中的配置devServer: { port: 8000, proxy: { "/api": { target: "http://localhost:8080" } }},原创 2021-06-15 19:39:25 · 175 阅读 · 0 评论 -
JSONP跨域解决方案底层原理
跨域(非同源策略请求)同源策略请求 ajax / fetch部署到服务器上xampp 修改本地的host文件请求http://127.0.0.1:1234/index.html相当于请求http://api.qq.com/getData127.0.0.1:1234 http://api.qq.com/服务器拆分web服务器:静态服务 kbs.sports.qq.comdata服务器:业务逻辑和数据分析 api.sports.qq.com图片服务器三者一样就是同源,只要有一个不同就是跨原创 2021-06-15 15:17:30 · 136 阅读 · 1 评论 -
React脚手架中配置代理解决跨域问题
来源:12问题:新建一个react项目(端口号为3000),直接访问端口号为5000的服务器地址,存在跨域问题使用proxy添加代理解决跨域问题(已失效)代理先在3000端口寻找是否有此资源,如果没有,再转发至5000端口Reactimport React, {Component} from 'react';import axios from 'axios';class Index extends Component { getStudentData = () =&g.原创 2021-06-15 13:47:02 · 341 阅读 · 2 评论 -
跨域资源共享CORS详解
它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制简介CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS.转载 2021-06-15 10:06:35 · 649 阅读 · 0 评论