前端如何处理跨域问题,小白看过来哦~

Fairy_tutu

已于 2022-12-23 22:35:28 修改

阅读量475

点赞数

文章标签：前端 javascript html5

于 2022-12-23 22:34:52 首次发布

本文链接：https://blog.csdn.net/Fairy_tutu/article/details/128424807

版权

跨域是指浏览器的同源策略限制了JavaScript对不同源的请求。当协议、域名或端口不一致时会发生跨域。解决跨域问题的方法包括JSONP（通过动态添加script标签实现）和设置Vue-Cli的代理配置，以及后端通过CORS添加Access-Control-Allow-Origin响应头。在开发环境中，使用Vue-Cli代理可以便捷地解决跨域问题。

摘要由CSDN通过智能技术生成

一 . 什么是跨域 ?

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

二 . 什么时候会跨域 ?

如果请求的URL地址与当前地址栏中的URL地址协议不同、域名不同、端口不一致时，就会出现跨域

三 . 跨域请求出现错误的条件 :

浏览器同源策略 且请求类型是ajax类型

四 . 常用解决方案 :

(1) JSONP方式发送请求 :

一般情况下，ajax请求后返回的对象都是json对象，需要服务器端将json对象转换为callback函数的js脚本形式。也可以说，jsonp跨越就是通过动态添加script标签,再请求一个带参网址实现跨域通信。

(2) Vue-Cli配置代理 :

分析 :

vue-cli脚手架工具在启动时，会开启一个前端项目的服务器。在同一局域网中的用户都可以通过ip地址来访问。
vue-cli脚手架支持配置一个代理：将指定的类型请求，转发到目标服务器。
代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求
代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

这样，我们就可以通过服务器代理做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可

在vue.config.js配置文件中配置

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://线上的地址/api/login
        '/api': {
          target: 'http://线上的地址' // 我们要代理的真实接口地址
        }
      }
    }
  }
}

(3) 推荐~直接让后端修改请求头

后端写代码(CORS)在响应中添加必要的响应头 :

header(Access-Control-Allow-Origin：*) 接受任意域名的请求。
header(Access-Control-Request-Method：POST,GET,PUT,PATCH...) 允许访问的方式