跨域报错是前端开发中非常经典的一个错误，报错如下
Access to XMLHttpRequest at '......' from origin
'......' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
跨域错误源自于浏览器的同源策略，想要解决跨域首先要知道什么是同源策略？
一、同源策略？同源策略：著名的安全策略，URL有三个基本组成部分：协议+域名或ip+端口，三个必须完全相同称之为同源，不同源的称之为跨域
URL 与 URL 对比:
:3000/
https://localhost:3000/ 不同源：协议不同
:3000/
:3000/ 不同源：域名或ip不同
:3000/
:3001/ 不同源：端口不同
:3000/
:3000/ 同源
:3000/
:3000/ 同源
注意：同源策略不是服务器行为，而是浏览器的行为，服务器会正常响应请求，但是如果不同源会被浏览器拦截
搭建express服务器——演示搭建一个express服务器用来演示跨域报错
安装express
在app.js文件中
在views/index.html文件中
打开浏览器访问:3000/
(1）调用getIpTest发送请求不会报错，因为浏览器地址栏访问的服务器是:3000/ ， tpwallet官网下载而方法内发送请求的URL也是:3000/ ，tp官网下载视为同源
(2）调用getDnameTest发送请求报错，因为浏览器地址栏访问的服务器是:3000/ ，而方法内发送请求的URL也是:3000/ ，视为跨域
Access to XMLHttpRequest at ':3000/......' from origin
':3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
打开浏览器访问:3000/
(3）调用getDnameTest发送请求不会报错，因为浏览器地址栏访问的服务器是:3000/ ，而方法内发送请求的URL也是:3000/ ，视为同源
(4）调用getIpTest发送请求报错，因为浏览器地址栏访问的服务器是:3000/ ，而方法内发送请求的URL也是:3000/ ，视为跨域
Access to XMLHttpRequest at ':3000/......' from origin
':3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
二、vue如何处理跨域问题？ (1）创建vue项目，安装axios模块在main.js中
在views/About.vue中
脚手架项目端口是8080而请求的express服务器端口是3000，不满足同源策略，发送请求报跨域错误
Access to XMLHttpRequest at ':3000/......' from origin
':8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
(2）解决办法 1.配置代理服务器在vue.config.js文件中
(修改后需要重启脚手架项目）
在views/About.vue文件中
原理：
跨域是浏览器的安全策略，服务器和服务器之间发送请求没有跨域
在启动脚手架的时候会启动一个内置web服务器
请求的时候浏览器实际并没有直接和需要请求的服务器通信，而是通过内置的web服务器在中转
注意：
项目上线需要把打包后的文件放在服务器上运行，而不是启动脚手架运行，也就没有内置web服务器做代理，所以此方式只适用于开发测试阶段
上线时一般后端解决跨域问题
需要使用nginx代理或者服务器配置cors(每种语言有自己不同的配置方式)
2.express处理跨域express中处理跨域需要使用cors模块
在app.js文件中