跨域是什么和跨域解决方案

最新推荐文章于 2024-07-06 09:00:00 发布
最新推荐文章于 2024-07-06 09:00:00 发布
阅读量139 收藏
点赞数
文章标签： vue 跨域 nginx nodejs jsonp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45890764/article/details/113064858
版权
本文介绍了在JavaScript中处理跨域问题的三种常见方法：CORS、JSONP以及使用Nginx作为代理。通过修改响应头实现CORS，允许所有来源访问；利用JSONP的回调函数规避跨域限制；以及在Nginx配置中设置代理解决前后端分离部署的跨域问题。示例代码详细展示了每种方法的实现过程。
摘要由CSDN通过智能技术生成
跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；
下面我用express框架来进行演示：

server.js:

const express = require('express')
const app = express()
app.use(express.static(__dirname))
app.listen(90)

const app2 = express()
//91端口的服务   返回数据
app2.get("/",function(req,res){
    res.send("你好")
})
app2.listen(91)

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>大家好</h1>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.get('http://localhost:91/').then(res=>console.log(res))
</script>
</html>
90端口显示的是我们的index.html页面，91端口是我们的数据，现在我想通过axios从90端口拿到91端口的数据，结果浏览器告诉我们发生了跨域(端口不同)

kuayu
这时候我们要想解决办法：

CORS

修改响应头
浏览器告诉我们没有 Access-Control-Allow-Origin请求头，那么我们就加一个嘛。
const express = require("express");
const app = express();
app.use(express.static(__dirname));
app.listen(90);

const app2 = express();
//91端口的服务   返回数据
app2.get("/", function (req, res) {
  res.header("Access-Control-Allow-Origin", "*");
  res.send("你好");
});
app2.listen(91);

这样我们就可以拿到数据

jieguo

JSONP

想用jsonp,我们就要了解一个现象：我们通过href或者src去请求下来的脚本或者css文件或者image再或者视频文件等都不存在跨域问题，只有通过ajax请求下来的数据才会发生跨域问题
思路：把要发送的数据放在函数中，在客户端通过调用函数来获得数据。来看代码：

server.js

const express = require("express");
const app = express();
app.use(express.static(__dirname));
app.listen(90);

const app2 = express();
//91端口的服务   返回数据
app2.get("/", function (req, res) {
   var name = req.query.callback;
  res.send(name+'("hhh")');
});
app2.listen(91);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>大家好</h1>
</body>
<script>
    function f(data) {
        console.log(data)
    }
</script>
<script src="http://localhost:91?callback=f"></script>
</html>

这里边 req.query.callback,req.query.内容，这个内容就是http://localhost:91? 后边的内容。比如我们在服务端传的是callback,那么我们接受时就用？callback=aa(这个名字就随便了)。TIPS：我们引入时src要在函数的下边。

nginx

这个是我做的uni-app项目部署到我的服务器上时，遇到的问题。我只想把前端放到我的服务器上，后端部署到了另外一个项目，这就涉及到了跨域。
// api请求前缀
	// #ifdef H5
	webUrl:'/api',

我使用了nginx来做代理:

  location /api {
            proxy_pass https:/xxx.xxx.cn/api/v1;
        }

当我们请求的路径为/api时，我们会让设置的https:/xxx.xxx.cn/api/v1来代替请求。

%程序羊%
关注
jQuery跨域问题解决方案
10-23
在标题“jQuery跨域问题解决方案”中提到的JSONP（JSON with Padding）便是其中一种。JSONP允许跨域访问，其工作原理是允许用户传递一个回调函数名给服务器，然后服务器将返回一段JavaScript代码，其中包括了调用该...
Python项目跨域问题解决方案
12-17
第二个解决方案是安装和配置Django的`django-cors-headers`模块。这个模块允许你轻松地管理Django应用的跨域策略。首先，你需要通过以下命令安装该模块： ```bash pip install django-cors-headers -i ...
web跨域解决方案
dddp75921的博客
09-01 271
阅读目录 什么是跨域 常用的几种跨域处理方法： 跨域的原理解析及实现方法 总结 摘要：跨域问题，无论是面试还是平时的工作中，都会遇到，本文总结处理跨域问题的几种方法以及其原理，也让自己搞懂这方面的知识，走起。 回到顶部 什么是跨域 　　 　 在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。...
跨域的解决方案
lbjbk的博客
09-22 115
跨域的解决方案 跨域的解决方案呢，目前主流的呢，有三种 跨域呢，他是浏览器做出的限制，和后端没有关系 jsonp 是利用script标签，向服务器发送请求，服务器通过接收请求，返回一段js代码，调用客户端写好的方法，把json数据传入该方法，即可拿到想要的数据 vue的代理方式（前端代理和后端代理） 前端代理在vue中主要通过vue脚手架中的config中的index文件来配置，其中有个proxyTable来配置跨域 CORS服务端操作 CORS全程叫跨域资源共享，主要是后台工程师设置后端代码来达到前
什么是跨域？——详解跨域问题及其解决方案
最新发布
fudaihb的博客
07-06 6254
跨域问题是Web开发中常见且令人困扰的问题之一。理解跨域的原理及其解决方案对于前后端分离开发尤为重要。本文将详细介绍跨域的概念、产生原因、常见的跨域解决方案，并提供详细的代码示例，帮助读者深入理解跨域问题及其应对方法。
跨域的解决方式有哪些？
weixin_44190647的博客
08-26 460
跨域的解决方式有哪些？ 答：产生跨域的情况有：不同协议，不同域名，不同端口以及域名和 ip 地址的访问都会产生跨域。跨域的解决方案目前有三种主流解决方案： 是 jsonp jsonp 实现原理：主要是利用动态创建 script 标签请求后端接口地址，然后传递 callback 参数，后端接收 callback，后端经过数据处理，返回 callback 函数调用的形式，callback 中的参数就是 json 优点：浏览器兼容性好， 缺点：只支持 get 请求方式 是代理（前端代理和后端通常通过 nginx
跨域解决方案
k0bin的博客
01-27 345
1. 后端解决 后端解决跨域的主要方式是，通过在响应头中设置相关的跨域字段，用于告诉浏览器允许跨域请求资源。 2. nginx代理方案 在具有第三方资源访问的场景中，如在访问百度地图、高德地图相关的js资源时，无法修改他们的后端代码，因此，需要通过nginx代理，实现跨域的解决。 3. nginx设置CORS响应字段方案       ...
PHP Ajax跨域问题解决方案代码实例
01-19
本文通过设置Access-Control-Allow-Origin来实现跨域。 例如：客户端的域名是client.runoob.com，而请求的域名是server.runoob.com。 如果直接使用ajax访问，会有以下错误： XMLHttpRequest cannot load ...
spring cloud gateway请求跨域问题解决方案
08-25
Spring Cloud Gateway 请求跨域问题解决方案 Spring Cloud Gateway 作为一种基于微服务架构的API...在解决跨域问题时，需要根据实际情况选择合适的解决方案，并注意配置的细节，以确保客户端和服务器之间的正常通信。
跨域是什么
qq_38655181的博客
09-14 213
跨域是什么？怎么解决？跨域是什么怎么解决？ 跨域是什么 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。 所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子： http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域） http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，
跨域问题解决方案
weixin_45063957的博客
03-28 1265
1、什么是跨域 协议相同 http https 域名相同 www.onlineclass.net 端口相同 80 81 在浏览器访问的时候，以上三者任意一个不同，都是跨域； 浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域 Nginx是用来干什么的？ - 斯外戈 - 博客园 2、解决跨域的方法 (1) Http响应头配置允许跨域 nginx层配置,在前端和后端之间加上一个反向代理服务器 ...
跨域问题的解决方案
LengDanRan
10-22 262
跨域问题的解决方案 解决跨域问题的方式也有多种。 1、前后端结合（JsonP） 虽然jsonp也可以实现跨域，但是因为jsonp不支持post请求，应用场景受到很大限制，所以这里不对jsonp作介绍。 2、纯后端方式一（CORS方式） @CrossOrigin CORS 是w3c标准的方式，通过在web服务器端设置：响应头Access-Cntrol-Alow-Origin 来指定哪些域可以访问本域的数据，ie8&9(XDomainRequest)，10+,chrom4，firefox3.5,safa
Ajax跨域解决方案：JSONP、CORS与代理请求
JSONP是一种早期的跨域解决方案，适用于支持GET请求的API。它是通过动态插入`<script>`标签来实现的，因为`<script>`标签不受同源策略限制。服务端提供一个可被调用的JavaScript函数，前端通过指定该函数名作为回调...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值