跨域是什么和如何解决跨域问题的三种方法

最新推荐文章于 2024-07-06 09:00:00 发布

想被带飞的鱼

最新推荐文章于 2024-07-06 09:00:00 发布

阅读量734

点赞数

分类专栏： node 文章标签：前端 node.js 跨域

本文链接：https://blog.csdn.net/m0_62008199/article/details/124288997

版权

node 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

跨域

概念

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

所谓同源，是指域名(IP)、协议(http：80/https：443)、端口(8080)均相同

ajax不允许跨域访问，只能同域访问。

如何解决跨域

一：CORS

允许跨域访问(最简单)，在服务器端加一个响应头操作（允许跨域操作）

服务器告诉浏览器可以跨域设置响应头

//设置响应头,要在app.use('/', indexRouter);的前面设置
app.use('/*',function(req,res,next){
  res.setHeader("Access-Control-Allow-Origin","*");
  res.setHeader("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type,Accept"); // 服务器支持的头信息
  res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); // 允许的方法  
  next();
})

操作：

<body>
    <h1>页面1</h1>
    <button id="btn">点击</button>
    <!-- <img src="http://localhost:3003/images/12.jpg" alt=""> -->
    <script src="./layui/layui.js"></script>
    <script>
        layui.define(function () {
            let {$} = layui;
            $("#btn").click(function(){
                $.ajax({
                    type:"get",
                    url:"http://localhost:3003/users",
                    success(res){
                        console.log(res);
                    }
                })
            })
        })
    </script>
</body>

二：代理服务器

用的最多，配置代理

写在app.js里面，写在浏览器访问的服务器作为代理服务器去访问其他服务器

用的express插件，下载插件：npm i http-proxy-middleware

1. 引入

//引入创建中间件
const {createProxyMiddleware } = require('http-proxy-middleware');

2.配置代理

注：要放在var app = express();前面

// 配置代理
const restream = function(proxyReq, req, res, options) {
  if (req.body) {
      let bodyData = JSON.stringify(req.body);
      // incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
      proxyReq.setHeader('Content-Type','application/json');
      proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
      // stream the content
      proxyReq.write(bodyData);
  }
}
const options = {
  target: 'http://localhost:3003',  // 目标服务器的 host
  changeOrigin: true,               // 默认 false，是否需要改变原始主机头为目标 URL
  pathRewrite: {                    // 重写请求
    '^/api': '/',                   // 所有以 "/api" 开头的请求，"/api" 都会重写为 "/"
  },
  onProxyReq:restream
}

3.编写路由

// 设置访问代理的路由，该行代码必须写在 var app = express(); 之后
app.use('/api', createProxyMiddleware(options));

4.调用ajax

$.ajax({
        type:"get",
        url:"/api/users",
        success(res){
        console.log(res);
        }
})

5.代理的3003服务器

//代理服务器
router.get('/', function(req, res, next) {
  res.send('respond 资源222');
});

三：JSONP

面试中：（问的最多，用的最少）

JSONP不是ajax所以不存在跨域问题，

JSONP:(JSON with padding)

浏览器通过spcrit标签向服务器发起请求，

//浏览器通过spcrit标签向服务器发起请求 
<script src="http://localhost:3003/users"></script>

//ajax里面使用jsonp方法
$.ajax({
            type:"get",
            url:"http://localhost:3003/users",
            dataType:"jsonp",   //数据类型
            jsonpCallback:"callback",   //后面得名字
            success(res){
            console.log(res);
            }
 })

服务器把返回的消息外面包裹一个可执行得函数，

//不能用post方法，只能用get方法
router.get('/', function(req, res, next) {
  res.send('callback("respond 资源111")');
});

浏览器接收到服务器返回得消息后执行这个函数，从而得到里面得数据

//先执行后引用 
<script>
        function callback(res){
            console.log(res);
        }
  </script>

缺点：

只能用get提交，不能做增删改查

想被带飞的鱼

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
跨域是什么和如何解决跨域问题的三种方法

跨域概念跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源，是指域名(IP)、协议(http：80/https：443)、端口(8080)均相同ajax不允许跨域访问，只能同域访问。如何解决跨域一：CORS允许跨域访问(最简单)，在服务器端加一个响应头操作（允许跨域操作）服务器告诉浏览器可以跨域设置响应头//设置响应头,要在app.use('/', indexRouter);的前面设置app.use('/*',function
复制链接

扫一扫

专栏目录