前端跨域问题解决方法

永远少年@

已于 2022-11-16 17:00:28 修改

阅读量2k

点赞数

文章标签：前端 javascript ajax react vue

于 2022-10-20 15:41:11 首次发布

本文链接：https://blog.csdn.net/LovelyHeart/article/details/127428554

版权

跨域问题解决方法:

一.

方法1:cors资源共享(后端配置)

跨源资源共享 (CORS)（或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

后台配置cors：

CORS是跨源资源分享,其本质是设置响应头，使得浏览器允许跨域请求

目前，所有浏览器都支持该功能，IE浏览器不能低于IE10

(最理想的解决方式,后端配置好后,前端无需任何配置,即可直接使用)

方法2:jsonp格式(只能在get请求方式中使用)

jsonp跨域请求的原生写法

    //动态创建script标签
    let script = document.createElement('script');
    //创建src属性 访问目标域名
    script.src = 'http://suggestion.baidu.com/su?cb=callback&wd=123';
    //把script标签追加到body中 运行这个网络请求
    document.body.appendChild(script);

    //定义函数接收返回的数据
    function callback(res) {
        console.log(res);
        console.log(res.s);
    }

jQuery将jsonp跨域请求也封装进了ajax中

    $.ajax({
      type: 'get',
      url: 'http://suggestion.baidu.com/su',
      data: {//传递的参数
        wd: '123'//wd是百度后台定义的参数变量
      },
      dataType: 'jsonp',//必须写 定义的是jsonp请求方式
      jsonp: 'cb',// 后端接收的函数名变量，如果是callback则可以省略，否则不可以省略
      jsonpCallback: 'callback',//前端定义接收函数名变量，省略后会默认生成一个函数jquery+数字
      success: function (res) {
        console.log(res);
      }
    });

jsonp的整个过程就类似于前端声明好一个函数，后端返回执行函数。执行函数参数中携带所需的数据

方法3:使用iframe解决跨域(以前的跨域方法)

使用方法类似于jsonp格式的原生写法,也只能请求get方法

	//动态创建iframe标签
    let iframe = document.createElement('iframe');
    //创建src属性 访问目标域名
    iframe.src = 'http://suggestion.baidu.com/su?cb=callback&wd=123';
    //把iframe标签追加到body中 运行这个网络请求
    document.body.appendChild(iframe);

二.react框架中的方法:

方法1:在package.json配置文件中配置

{
  "proxy":"代理路径"
}

使用时,如需跨域只用写后面具体的接口即可,例如:

fetch('/index/login')

如不需要跨域的接口,正常写域名+接口名即可,该方法配置为项目全局,不可配置第二个跨域代理.

方法2:下载插件 http-proxy-middleware

2.1 下载 npm i http-proxy-middleware -S

2.2 在src路径下创建一个setupProxy.js文件,将配置跨域信息写在这个文件下

2.3 配置setupProxy.js配置文件

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: '需要代理的域名',//如果域名给的有端口号,此处应带上端口号
      changeOrigin: true//是否需要代理,true:需要
    })
  );
 //如需代理多个跨域
  app.use(
    '/foo',//修改接口名
    createProxyMiddleware({
      target: '需要代理的域名',
      changeOrigin: true//是否需要代理,true:需要
    })
  );
};


//在其他文件使用时
fetch('/api/index/login')//用/api代替域名
fetch('/foo/index/login')//使用哪个跨域接口,用哪个跨域代理的接口名代替其域名

三.vue框架中的跨域解决:

解决方法千千万,这里我只提供两种解决方法:

方法1:下载插件 http-proxy-middleware

使用方法和上文中提到的React框架中的使用情况基本相同,详情可查阅插件的官方文档,在此不作赘述,文档地址:

https://www.npmjs.com/package/http-proxy-middleware

方法2:使用Vue自带的跨域配置(推荐使用)

Vue框架内置了跨域插件,我们使用时只需要在vue.config.js文件下配置相关所需配置即可使用,简单快捷,所以推荐使用.

// 跨域配置(vue自带)
  devServer:{
    proxy:{
        //名称自定义,不可重复
      "/api":{
        // 目标URL
        target:'https://m.mafengwo.cn',
        changeOrigin:true,//允许跨域
        // 路径重写
        pathRewrite:{
          "^/api":''
        }
         //如需多个接口跨域,重复上述操作
      }
    }
  }


//使用时,用  /api (自定义名称)代替域名
fetch('/api/index/login')