Vue中解决跨域问题只要出现跨域问题，浏览器就会出现一个固定格式的报错信息 Access to XMLHttpReque

一、跨域固定报错格式

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

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.

二、为什么会报跨域？

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

同源的定义: 两个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项目中，主要针对CORS或Proxy这两种方案展开

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())

设置成功之后显示

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

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

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'

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

特别强调：

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