网站界面建议政务公开 加强门户网站建设

当前位置： 首页 > news >正文

网站界面建议,政务公开 加强门户网站建设,wordpress瘦身,网上购物十大品牌跨域 想要了解跨域#xff0c;首要要了解源 什么是源#xff0c;源等于协议加域名加端口号 只有这三个都相同#xff0c;才是同源#xff0c;反之则是非同源。 比如下面这四个里#xff0c;只有第4个是同源 而浏览器给服务器发送请求时#xff0c;他们的源一样#xff0… 跨域 想要了解跨域首要要了解源 什么是源源等于协议加域名加端口号 只有这三个都相同才是同源反之则是非同源。 比如下面这四个里只有第4个是同源 而浏览器给服务器发送请求时他们的源一样就是同源请求反之就是非同源请求非同源请求又称为跨域。 当你是跨域时浏览器为了确保资源安全会对跨域的访问资源做出一些限制也就是浏览器的同源策略。 这是W3C上对同源策略的说明https://www.w3.org/Security/wiki/Same_Origin_Policy 浏览器会对跨域做出哪些限制 例如源a和源b它们是非同源的则浏览器会有如下限制 1. DOM访问限制源a的脚本不能读取和操作源b的DOM。 页面1 1. !DOCTYPE html

1. html langen
2. head
3. meta charsetUTF-8
4. meta nameviewport contentwidthdevice-width, initial-scale1.0
5. titleDocument/title
6. /head
7. body
8. h1我是页面1/h1
9. button onclickshowDOM()获取页面2的DOM/button
10. br
11. iframe idframePage src./demo.html/iframe
12. !– iframe idframePage srchttps://www.baidu.com/iframe –
14. script typetext/javascript
15. function showDOM(){
16. const framePage document.getElementById(framePage)
17. console.log(framePage.contentWindow.document.body) //同源的可以获取非同源的无法获取
18. }
19. /script
20. /body
21. /html页面2 1. !DOCTYPE html
22. html langen
23. head
24. meta charsetUTF-8
25. meta nameviewport contentwidthdevice-width, initial-scale1.0
26. titleDocument/title
27. /head
28. body
29. h2我是页面2/h2
30. /body
31. /html页面是这样的 点击获取 换一个不同源的页面 1. body
32. h1我是页面1/h1
33. button onclickshowDOM()获取页面2的DOM/button
34. br
35. !– iframe idframePage src./demo.html/iframe –
36. iframe idframePage srchttps://www.bilibili.com/iframe
38. script typetext/javascript
39. function showDOM() {
40. const framePage document.getElementById(framePage)
41. console.log(framePage.contentWindow.document.body) //同源的可以获取非同源的无法获取
42. }
43. /script
44. /body获取DOM 获取不到 2. 第二个限制源a不能访问源b的cookie 3. !DOCTYPE html
45. html langen
47. head
48. meta charsetUTF-8
49. meta nameviewport contentwidthdevice-width, initial-scale1.0
50. titleDocument/title
51. /head
53. body
54. h1我是页面1/h1
55. button onclickgetCookie()获取页面2的cookie/button
56. br
57. !– iframe idframePage src./demo.html/iframe –
58. iframe idframePage srchttps://www.bilibili.com/iframe
60. script typetext/javascript
61. function getCookie() {
62. const framePage document.getElementById(framePage)
63. console.log(framePage.contentWindow.document.cookie) //同源的可以获取非同源的无法获取
64. }
65. /script
66. /body
68. /html还是一样的页面这次获取的是cookie 也是获取不到的因为你在获取document这一步就已经失败了 3. ajax响应数据限制源a可以给源b发请求但是无法获取源b响应的数据。 这是一个获取头条新闻的页面 代码 28. !DOCTYPE html
69. html langen
70. head
71. meta charsetUTF-8
72. meta nameviewport contentwidthdevice-width, initial-scale1.0
73. titleDocument/title
74. /head
75. body
76. button onclickgetNews()获取头条新闻/button
78. script
79. async function getNews() {
80. const result await fetch(https://www.toutiao.com/hot-event/hot-board/?origintoutiao_pc);
81. const data await result.json();
82. console.log(data);
83. }
84. /script
85. /body
86. /html页面 获取不到 备注在上述限制中浏览器对 Ajax 获取数据的限制是影响最大的一个且实际开发中经常遇到。 几个注意点 跨域限制仅存在浏览器端服务端不存在跨域。即使跨域了ajax请求也可以正常发出但响应数据不会交给开发者。linkscriptimg这些标签发出的请求也可能跨域只不过浏览器对标签跨域不做严格限制对开发几乎无影响。 那么要如何解决跨域 想要解决跨域一般有三种方法 第一种用CORS解决ajax跨域问题 CORS 概述 CORS 全称Cross-Origin Resource Sharing跨域资源共享是用于控制浏览器校验跨域请求的一套规范服务器依照 CORS 规范添加特定响应头来控制浏览器校验大致规则如下 服务器明确表示拒绝跨域请求或没有表示则浏览器校验不通过。服务器明确表示允许跨域请求则浏览器校验通过。 了解了CORS之后还要了解一下简单请求和复杂请求 CORS 会把请求分为两类分别是1.简单请求、2.复杂请求。 简单请求要满足这个三个条件 请求方法要为 get, head或者post。请求头字段要符合CORS安全规范(https://fetch.spec.whatwg.org/#cors-safelisted-request-header), 一般只要不手动修改请求头都能符合改规范。请求头的Content-Type的值只能是这三种: text/plain multipart/form-data application/x-www-form-urlencoded 不满足这三个要求的请求都是复杂请求而复杂请求会自动发送预检请求。 预检请求是一种在实际跨域请求发出之前由浏览器自动发出的一种请求。主要用于向服务器确认是否允许接下来的跨域请求。基本流程是这样的浏览器先发起一个options请求携带这个几个请求头Origin发起请求的源Access-Control-Request-Method实际请求的HTTP方法Access-Control-Request-Headers实际请求中使用的自定义头。如果通过预检才会继续发起实际的跨域请求。 这就是预检请求 CORS 解决简单请求跨域 前端 1. !DOCTYPE html
87. html langen
88. head
89. meta charsetUTF-8
90. meta nameviewport contentwidthdevice-width, initial-scale1.0
91. titleDocument/title
92. /head
93. body
94. button onclickgetData()获取数据/button
96. script
97. async function getData() {
98. const url http://127.0.0.1:8081/;
99. const result await fetch(url);
100. const data await result.json();
101. console.log(data);
102. }
103. /script
104. /body
105. /html服务端代码以express框架为例 1. const express require(express);
106. const app express();
108. app.get(/, (req, res) {
109. res.send([{ name: 张三, age: 19 }])
110. })
112. app.listen(8081, () {
113. console.log(服务器成功启动);
114. })这个时候是获取不到数据的 设置下cors 1. const express require(express);
115. const app express();
117. app.get(/, (req, res) {
118. res.setHeader(Access-Control-Allow-Origin,http://127.0.0.1:5500)
119. res.send([{ name: 张三, age: 19 }])
120. })
122. app.listen(8081, () {
123. console.log(服务器成功启动);
124. })这样就能获取到数据了 整体思路服务器在给出响应时通过添加Access-Control-Allow-Origin响应头来明确表达允许某个源发起跨域请求随后浏览器在校验时直接通过。 像这样的设置是允许某个源跨域 1. // 允许 http://127.0.0.1:5500 这个源发起跨域请求
125. res.setHeader(Access-Control-Allow-Origin, http://127.0.0.1:5500)而这样则是允许所有源跨域 1. // 允许所有源发起跨域请求
126. res.setHeader(Access-Control-Allow-Origin, *)CORS 解决复杂请求跨域 第一步服务器先通过浏览器的预检请求服务器需要返回如下响应头 Access-Control-Allow-Origin允许的源 Access-Control-Allow-Methods允许的方法 Access-Control-Allow-Headers允许的自定义头 Access-Control-Max-Age预检请求的结果缓存时间可选 第二步处理实际的跨域请求与处理简单请求跨域的方式相同 服务器代码 1. const express require(express);
127. const app express();
129. app.options(/, (req, res) {
130. res.setHeader(Access-Control-Allow-Origin, http://127.0.0.1:5500)
131. res.setHeader(Access-Control-Allow-Methods, GET)
132. res.setHeader(Access-Control-Allow-Headers, city)
133. res.send()
134. })
136. app.get(/, (req, res) {
137. res.setHeader(Access-Control-Allow-Origin, http://127.0.0.1:5500)
138. res.send([{ name: 张三, age: 19 }])
139. })
141. app.listen(8081, () {
142. console.log(服务器成功启动);
143. })前端代码 1. !DOCTYPE html
144. html langen
145. head
146. meta charsetUTF-8
147. meta nameviewport contentwidthdevice-width, initial-scale1.0
148. titleDocument/title
149. /head
150. body
151. button onclickgetData()获取数据/button
153. script
154. async function getData() {
155. const url http://127.0.0.1:8081/;
156. const result await fetch(url, { method: GET, headers: { city: beijing } });
157. const data await result.json();
158. console.log(data, data);
159. }
160. /script
161. /body
162. /html数据获取到了 预检请求返回的响应头 借助 cors 库快速完成配置 上述的配置中需要自己配置响应头比较麻烦借助cors库可以更方便完成配置 安装cors npm i cors 配置cors 1. const express require(express);
163. const cors require(cors);
164. const app express();
166. // 使用cors中间件
167. app.use(cors({
168. origin: http://127.0.0.1:5500, // 允许的源
169. methods: [GET, POST, PUT, DELETE, HEAD, OPTIONS], // 允许的方法
170. allowedHeaders: [city], // 允许的自定义头
171. exposedHeaders: [abc], // 要暴露的响应头
172. optionsSuccessStatus: 200 // 预检请求成功的状态码
173. }))
175. app.get(/, (req, res) {
176. res.setHeader(abc, 123)
177. res.send([{ name: 张三, age: 19 }])
178. })
180. app.listen(8081, () {
181. console.log(服务器成功启动);
182. })
183. 成功获取数据 第二种JSONP 解决跨域问题 JSONP 概述 JSONP 是利用了script标签可以跨域加载脚本且不受严格限制的特性可以说是程序员智慧的结晶早期一些浏览器不支持 CORS 的时可以靠 JSONP 解决跨域(现在基本不用了)。 基本流程 第一步客户端创建一个script标签并将其src属性设置为包含跨域请求的 URL同时准备一个回调函数这个回调函数用于处理返回的数据。第二步服务端接收到请求后将数据封装在回调函数中并返回。第三步客户端的回调函数被调用数据以参数的形势传入回调函数。 示例代码 前端 1. !DOCTYPE html
184. html langen
185. head
186. meta charsetUTF-8
187. meta nameviewport contentwidthdevice-width, initial-scale1.0
188. titleDocument/title
189. /head
190. body
191. script
192. function callback(data) {
193. console.log(data, data)
194. }
195. /script
196. script srchttp://127.0.0.1:8081/users/script
197. /body
198. /html后端 1. const express require(express);
199. const app express();
201. app.get(/users, (req, res) {
202. res.send(callback([{ name: 张三, age: 19 }]))
203. })
205. app.listen(8081, () {
206. console.log(服务器成功启动);
207. })结果 优化下代码 前端 1. !DOCTYPE html
208. html langen
210. head
211. meta charsetUTF-8
212. meta nameviewport contentwidthdevice-width, initial-scale1.0
213. titleDocument/title
214. /head
216. body
217. button onclickgetUsers()获取用户/button
219. script
220. function test(data) {
221. console.log(data, data)
222. }
223. function getUsers() {
224. // 创建script元素
225. const script document.createElement(script)
226. // 指定script的src属性
227. script.src http://127.0.0.1:8081/users?callbacktest
228. // 将script元素添加到body中触发脚本加载
229. document.body.appendChild(script)
230. // script标签加载完毕后移除该标签
231. script.onload () {
232. script.remove()
233. }
234. }
235. /script
236. /body
238. /html后端 1. const express require(express);
239. const app express();
241. const users [
242. { name: 张三, age: 19 },
243. { name: 李四, age: 20 }
244. ]
246. app.get(/users, (req, res) {
247. const { callback } req.query
248. res.send(\({callback}(\){JSON.stringify(users)}))
249. })
251. app.listen(8081, () {
252. console.log(服务器成功启动);
253. })效果 用jQuery封装jsonp 1. $.getJSON(http://127.0.0.1:8081/teachers?callback?, (data) {
254. console.log(data)
255. })第三种配置代理服务器解决跨域 这里需要用到http-proxy-middleware这个包来配置代理服务器 下载http-proxy-middleware npm i http-proxy-middleware 前端 1. !DOCTYPE html
256. html langen
257. head
258. meta charsetUTF-8
259. meta nameviewport contentwidthdevice-width, initial-scale1.0
260. titleDocument/title
261. /head
262. body
263. button onclickgetNews()获取头条数据/button
265. script
266. async function getNews() {
267. const url http://127.0.0.1:8081/api/hot-event/hot-board/?origintoutiao_pc;
268. const result await fetch(url);
269. const data result.json();
270. console.log(data, data);
271. }
272. /script
273. /body
274. /html后端 1. const express require(express);
275. const app express();
276. const { createProxyMiddleware } require(http-proxy-middleware);
278. app.use(express.static(./public))
280. app.use(/api, createProxyMiddleware({ // 拦截所有带有/api的请求
281. target:https://www.toutiao.com, // 转发的目标
282. changeOrigin:true, // 允许跨域
283. pathRewrite:{
284. ^/api: // 把路径中的/api去掉
285. }
286. }))
288. app.listen(8081, () {
289. console.log(服务器成功启动);
290. })
291. 需要把前端代码当成静态资源部署在服务器上 目录 把服务器启动了需要去http://127.0.0.1:8081获取页面 点击获取数据 数据成功获取