前端跨域的几种方法

最新推荐文章于 2024-08-14 16:49:42 发布

快乐的蜜蜂

最新推荐文章于 2024-08-14 16:49:42 发布

阅读量222

点赞数 3

分类专栏：前端文章标签：前端跨域 JSONP了解 CORS的使用

本文链接：https://blog.csdn.net/hl971115/article/details/99702462

版权

前端专栏收录该内容

40 篇文章 2 订阅

订阅专栏

前段的跨域同源策略是什么呢?同源指的是三个同源：1，协议相同，域名相同，端口相同，例如http://172.0.0.1:8080；这些网址协议是http://域名是172.0.0.1:，端口号是8080，在这三个都相同的话就是同源，如果不相同,就存在了跨域.

一.JSONP跨域请求

首先我们要知道,jsonp跨域的原理是什么呢,我们的ajax请求会被浏览器给拦截下来，而就是浏览器对script,img,iframe 标签不受(同源策略)跨域的影响,所以我们可以在script中来编写请求

我们远程服务器(http://remote.com)根目录有一个js文件,内容是

alert("我是远程的js脚本");

在本地服务器我们就可以请求用绝对地址来请求
这个样子我们就可以看到有一个窗口弹出了

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script type="text/javascript" src="http://remote.com/remote.js"></script>
  </head>
  <body>
</body>
</html>

一般在程序中,我们不会这样子去写,需要创建在js中动态的去创建生成script标签

<script type="text/javascript">
      // 这里可以 拿到远程请求的数据做处理
      let remote = function(data){
          console.log(data);
      };
      // 输入你要请求的地址
      let url = "http://...";
      // 动态的创建script标签
      var script = document.createElement('script');
      //需要给scrpt 标签添加属性
      script.setAttribute('src', url);
      // 把script标签放在head中
      document.getElementsByTagName('head')[0].appendChild(script); 
    </script>

但是 jsonp 这个方式解决跨域需要前后端一起修改代码（服务器返回一个函数执行语句,然后执行一个callback函数,前端去拿里面json的数据）,所以已经不怎么适合现在的需求了,我们来看看其他的用法

二.我们来看看代理服务器
请求同源服务器,通过服务器转发到目标服务器 ,然后再转发给前端

在这里插入图片描述
这个样子我们就可以请求不同端口的数据了,但是如果项目上线后接口在不同的服务器,就仍然会存在跨域问题

三.CORS(Cross Origin Resource Share) 跨域资源共享,后端解决
跨域分为三种, 简单请求,预检请求，和携带cookie信息请求
1.简单请求是
get/post/head 请求方式是 Content-Type 是 application/x-www-form-urlencoded 和text/plain 和 multipart/form-data

const http = require("http");
const fs = require("fs");

http
  .createServer((req, res) => {
    const { method, url } = req;
   if ((method == "GET" || method == "POST") && url == "/users") {
      //   简单请求cors   http://localhost:3001跨域的地址
      res.setHeader("Access-Control-Allow-Origin", "http://localhost:3001");
      res.end(JSON.stringify([{ name: "tom", age: 20 }]));
    } 
  })
  .listen(3000);

2.预检请求是先发一个option请求给浏览器,来得到消息看是否满足后端设置返回消息的结果,如果不满足就不会返回消息,如果是满足了,就会发送一个真正的请求,去拿到所请求的内容.
在这里插入图片描述

const http = require("http");
const fs = require("fs");

http
  .createServer((req, res) => {
    const { method, url } = req;
 if ((method == "GET" || method == "POST") && url == "/users") {
      res.setHeader("Content-Type", "application/json");
      //   简单请求cors
      res.setHeader("Access-Control-Allow-Origin", "http://localhost:3001");
      // 这个是判断是否可以携带cookie请求信息
      res.setHeader("Access-Control-Allow-Credentials", "true");
      res.end(JSON.stringify([{ name: "tom", age: 20 }]));
    } else if (method == "OPTIONS" && url == "/users") {
      res.writeHead(200, {
        "Access-Control-Allow-Origin": "http://localhost:3001",
        // 设置允许请求的header请求 信息, Token 要跟前端请求的Token要一致
        "Access-Control-Allow-Headers": "Token,Content-Type",
        // 这个是跨域请求允许的方法
        "Access-Control-Allow-Methods": "GET,POST,PUT",
        "Access-Control-Allow-Credentials": "true"
      });
      res.end();
    }
  })
  .listen(3000);

好了,我知道的大概的跨域问题就是这些了,如果有什么错误的地方,欢迎评论指出,如果这篇文章对你有用处,点个赞呗,谢谢