Vue中解决跨域问题

11,723 阅读3分钟

一、跨域固定报错格式

只要出现跨域问题,浏览器就会出现一个固定格式的报错信息

Access to XMLHttpRequest at '服务器url地址' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

1648776314236.png

二、为什么会报跨域?

不满足同源策略:协议+域名+端口 是浏览器为了保护接口的一个安全策略,不让访问

  1. 同源的定义: 两个url地址的协议主机端口均一致

    协议:http ,https 主机:域名或者ip地址(127.0.01) 端口:3000,4399

    不同源的定义: 两个url地址,协议 主机 端口任何一个不一致 2.什么是跨域?

  • [浏览器使用 ajax,如果请求的接口地址 和 当前打开的页面地址 不同源 称之为跨域]

    • (1) ajax:浏览器只有使用ajax发送请求才会出现跨域。 href属性与src属性不会出现跨域-
    • (2)接口地址:ajax请求的url
    • (3)打开的页面:当前页面的window.location.href
    • (4)不同源 : 浏览器使用ajax,向不同源的接口发送请求,称之为 跨域访问

三、如何解决跨域?

在vue项目中,主要针对CORSProxy这两种方案展开

1.第一种:CORS 【后端】

  • 目前最主流、最简单的方案,直接让后端设置响应头,允许资源共享就ok了
//调用方法创建一个服务器
  const app = express()
//解析json格式的请求体
  app.use(express.json())
//解析查询字符串格式的情趣 
  app.use(exoress.urlencoded({extended:true}))
//第一种: 使用中间件函数来设置cors允许资源共享
  app.use((req.res.next)=>{
    //设置响应头 告诉浏览器任何地址都可以访问这个接口
    res.setHeader('Access-Cosntrol-Allow-Origin','*')
    //告诉浏览器支持这些方式
    res.setHeader('Access-Cosntrol-Allow-Methods','GET,POST,DELETE,PUT')
    next()
  })
//第二种 推荐使用插件
  const cors = require('cors')
  app.use(cors())

设置成功之后显示

1649136110969.png

2.第二种:JSONP 【前端+后端】

  • 曾经很流行,专治各种跨域问题
  • 需要前后端配合使用
  • 使用原理:通过script标签的src来发请求没有跨域限制来获取资源
  • 注意:JSONP只支持get请求,不支持post,请求回来的东西当做js来执行

1571892804340.png

3.第三种:Nginx 【后端=>反向代理】

4.第四种:Proxy 【前端解决:只适用于本地开发环境,上线了解决不了,直接把dist放在后端服务器中】

  • 产生了跨域:

    • 请求发了,【浏览器拦截了】
    • 服务器和服务器发请求 不存在跨域
    • 项目启动让服务器请求

服务器.png vue-cli脚手架工具搭建项目

vue.config.js配置文件中

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

通过axios发请求配置根路径

axios.defaults.baseURL='/api'

修改配置之后,一定要重启前端项目,跨域解决

Snipaste_2022-04-05_20-14-22.png 特别强调:

ajax的基地址baseUrl必须是相对地址,而不能是绝对地址