前端浏览器跨域问题

前端梭哈攻城狮
122 阅读2分钟

1. 前言

因为浏览器的同源策略，导致了前端请求服务器资源出现的跨域问题

2. 跨域问题解决方案

  • JQuery的jsonP跨越【需要配置jsonp接口】，get请求可通过<a> / <img> / <script>标签实现跨域访问
  • webpack 或 vue/cli  或 vite 的dev-server设置跨域
  • 服务器设置代理跨域，后台跨域返给前端，或者后端做转发，把数据返给前端
  • uniapp内置浏览器自带跨域
  • 使用谷歌浏览器的跨域插件，或者解除谷歌跨域限制【推荐文章：关于如何设置谷歌浏览器禁止检查ajax跨域问题的解决方案】
  • 使用nodeJS启用本地服务器，实现代理转发。跟dev-server类似

3. 方法介绍

  • jsonp 跨域
  • 什么是跨域？当请求url时，它的协议、域名、端口，任意一个与你当前页面的url不同即为跨域
  • 什么是JSONP? JSONP其实是一个跨域解决方案
  • JSONP跨域原理 ， <a> / <img> / <script>等标签的src属性，它不受同源策略的限制；JSONP请求数据时，服务器返回的是一段可执行的javascript代码
  • JSONP用途：解决请求其他服务器时的跨域问题
  • JSONP局限：只能用get方式，需要服务器做一些处理、配合
    <button onclick="sendAjax()">发送</button>
    <script>
      // 处理请求回调函数
      function dataFun(res) {
        console.log(res);
      }

      function sendAjax() {
        console.log("点击");
        let url = "http://localhost:5000/get_data?callback=dataFun";
        let _script = document.createElement("script");
        console.log('_script',_script)
        _script.setAttribute("src", url);
        _script.setAttribute("type", "text/javascript");
        document.getElementsByTagName("body")[0].appendChild(_script);
      }
    </script>
  • webpack 或 vue/cli  或 vite 的dev-server设置跨域
  devServer: {
    open: true, // 默认浏览器自动打开
    // inline: true, // 开启热更新
    // host: '0.0.0.0', // 设置为0.0.0.0则所有的地址均能访问
    port: '5000', // 设置本地服务器的端口号
    // 需要gzip压缩的文件【谨慎使用】
    // before (app, server) {
    //   app.get(/.*.(js)$/, (req, res, next) => {
    //     req.url = req.url + '.gz'
    //     res.set('Content-Encoding', 'gzip')
    //     next()
    //   })
    // },
    proxy: {
      '/admin': {
        target: baseUrl, // 测试域名
        changOrigin: true
      },
      '/api': {
        target: baseUrl, // 测试域名
        changOrigin: true
      }
    }
  },
  • 服务器设置代理跨域，后台跨域返给前端，或者后端做转发，把数据返给前端

一般情况下，再对接第三方服务的时候，经常用到，如请求微信用户信息，前端获取code后传递给后端，后端拿到code再通过微信开放API获取微信用户信息类似

  • uniapp内置浏览器自带跨域

这个就不做过多讲解

  • 使用谷歌浏览器的跨域插件，或者解除谷歌跨域限制

Allow-Control-Allow-Origin插件安装参考文章：blog.csdn.net/qcg14774125…

推荐，解除谷歌跨域限制，详细方法如下 【推荐文章：关于如何设置谷歌浏览器禁止检查ajax跨域问题的解决方案】

1、在桌面上先找到原本的chrome启动快捷应用程序exe文件
Image.png

2、找到该文件的位置

Image.png

3、创建快捷方式到桌面

Image.png

4、我们将新创建的快捷方式重新命名为cross-domain

Image.png

5、将该快捷方式放置文件路径为D:\three\chrome

Image.png

6、点击右键查看其属性

Image.png

7、在目标框内输入：C:\Users\ZGF\AppData\Local\Chromium\Application\chrome.exe --disable-web-security --user-data-dir=D:\three\chrome

原本的启动路径：  C:\Users\ZGF\AppData\Local\Chromium\Application\chrome.exe

谷歌的跨域命名:    --disable-web-security --user-data-dir=

新创建的cross-domain快捷方式的路径 ： D:\three\chrome

注意空格 Image.png

8、打开此浏览器如果出现这个标识，说明成功

Image.png

  • 使用nodeJS启用本地服务器，实现代理转发。跟dev-server类似

参考文档：blog.csdn.net/hs121946241…

大概思路，跟后端做请求代理转发是一样的，这里不做过多讲解。但是值得注意的是，后端标头需要声明允许跨域，或者IP加入白名单之类的

avatar
文章
阅读
粉丝