出于安全问题考虑, 都会有跨域限制, 你都不想浏览器在和你的服务器交互时还和别的服务器有联系吧(就好像默认不允许第三者插足). 但如果当前正在交互的服务器都同意了, 那么跨域也就没问题了(一方有这个想法, 另一方同意=>第三者成功插足/doge).

协议域名端口号有一个不同, 都是跨域, 注意二级域名不同也是跨域

本文章介绍三个解决跨域方法:

script标签的jsonp
服务端配置允许跨域
nginx反向代理

script标签的jsonp

JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。–来源百度

实验

html服务在本机5500端口, 相当于浏览器正在和5500端口交互, 去请求8080端口的服务

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="http://127.0.0.1:8080/index.js" charset="utf-8"></script>
</head>
<body><script>show()</script>
</body>
</html>

跨域资源文件在本机8080端口

当我们打开html, 控制台即可见到输出, 成功跨域

服务端配置允许跨域

本文章服务端使用nodejs, 其他语言也类似, 记得springboot是通过添加注解@CrossOrigin

实验

html服务在本机5500端口, 相当于浏览器正在和5500端口交互, 去请求3000端口的服务

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><script>fetch("http://localhost:3000").then(res => res.json()).then(data => { console.log(data) })</script>
</body>
<script>
</script>
</html>

服务端监听本机3000端口

const express = require('express')
const app = express()
// const cors = require('cors')
// app.use(cors({
//     origin: 'http://localhost:5500',// }))
app.get('/', (req, res) => {res.json({ "name": "zq", "age": 18 })
}).listen(3000)

当我们打开html, 可以看到开头熟悉的报错. 将js文件中的注释打开, 重新启动服务端, 即可解决
亲测localhost 和 127.0.0.1 不能混用, 也会存在跨域

nginx反向代理

html服务在本机5500端口, 相当于浏览器正在和5500端口交互, 去请求nginx监听的8080端口的服务

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><script>fetch("http://localhost:8080").then(res => res.json()).then(data => { console.log(data) })</script>
</body>
<script>
</script></html>

nginx监听8080端口, 将请求转发至服务端的3000端口

画线的头部可加可不加, 都可以实现跨域, 因为nginx已经帮我们配置好允许跨域

服务端监听本机3000端口

const express = require('express')
const app = express()app.get('/', (req, res) => {res.json({ "name": "zq", "age": 18 })
}).listen(3000)

参考: B站视频: https://www.bilibili.com/video/BV1Ei4y1o7jK

解决跨域问题的三种方法相关推荐

AJAX异步请求解决跨域问题的三种方式
一什么是跨域出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说We ...
解决跨域请求的四种方法
跨域跨域就是请求的url中的"协议"."域名"."端口号"其中任何一种不一样都是属于跨域.解决跨域的主要的四种方法是jsonp.跨域资源共 ...
解决“跨域问题”的几种方法
(0)使用注解方式,这个可能有些框架可以,有些不行,在要访问的方法前面加上此注解即可: @CrossOrigin (1)使用 Access-Control-Allow-Origin 设置请求响应头,简 ...
[转] js前端解决跨域问题的8种方案（最新最全）
[转] js前端解决跨域问题的8种方案(最新最全) 参考文章: (1)[转] js前端解决跨域问题的8种方案(最新最全) (2)https://www.cnblogs.com/chris-oil/p/ ...
【Cocos2d-x游戏开发】解决Cocos2d-x中文乱码的三种方法
[Cocos2d-x游戏开发]解决Cocos2d-x中文乱码的三种方法参考文章: (1)[Cocos2d-x游戏开发]解决Cocos2d-x中文乱码的三种方法 (2)https://www.cnbl ...
vbs执行ctrl+空格_VBS中解决路径带空格的三种方法
vbs中,如果需要运行的程序中带有空格,按照通常的方式往往会提示错误,其实有两种形式不同的解决方法: 在应用程序前后分别加三个双引号,代码如下: Set wshell=CreateObject(&qu ...
介绍什么是同源和什么是跨域，以及三种解决跨域问题的路径
什么是同源?什么是跨域? 客户端向服务器发送请求的时候,如果协议,域名(IP)和端口都一样,则称为同源,但凡有一个不一样则跨域,跨域请求默认受到浏览器的安全策略的限制,浏览器会给出相应的错误信息,对于 ...
Spring Boot 解决跨域问题的 3 种方案！
以下文章来源方志朋的博客,回复"666"获面试宝典作者:telami 来源:www.telami.cn/2019/springboot-resolve-cors/ 前后端分离大势 ...
Spring Boot 解决跨域问题的 3 种方案
来源 | r6d.cn/XTrB 前后端分离大势所趋,跨域问题更是老生常谈,随便用标题去google或百度一下,能搜出一大片解决方案,那么为啥又要写一遍呢,不急往下看. 问题背景: Same Orig ...

解决跨域问题的三种方法

script标签的jsonp

实验

服务端配置允许跨域

实验

nginx反向代理

解决跨域问题的三种方法相关推荐

最新文章

热门文章