继axios二次封装后跨域问题解决——配置代理、环境变量

附上节：vue中axios二次封装【简洁、附代码】＋api解耦

---

一、什么是跨域？

同源（即指在同一个域），就是两个页面具有相同的协议（protool），主机（host）和端口号（port）。
URL（Uniform Resource Locator，统一资源定位符）是用于标识和定位互联网上资源的字符串格式。它是Web浏览器、Web服务器等互联网应用程序中用来访问资源的标准格式。

1、协议（Protocol）：指定了访问资源所使用的协议，如 HTTP、HTTPS、FTP 等。例如，在 http:// 或 https:// 中，http 和 https 就是协议。
2、主机名（Host）：指定了资源所在的主机（服务器）的域名或IP地址。例如，在 https://www.example.com 中，www.example.com 就是主机名。
3、端口号（Port）：指定了用于访问资源的端口号。端口号是一个可选项，如果未指定，则使用默认端口。例如，在 https://www.example.com:443 中，443 就是端口号。常用的HTTP协议默认端口号是 80，HTTPS协议默认端口号是443。
4、路径（Path）：指定了资源在服务器上的路径。它是资源的具体位置。例如，在 https://www.example.com/path/to/resource 中，/path/to/resource 就是路径。
5、查询字符串（Query String）：指定了向服务器传递的参数。它以 ? 开头，多个参数之间使用 & 分隔。例如，在 https://www.example.com/search?q=keyword&page=1 中， ?q=keyword&page=1就是查询字符串。
6、片段标识符（Fragment Identifier）：用于标识资源中的一个特定部分。它以 # 开头。例如，在 https://www.example.com/page#section1 中， #section1 就是片段标识符。

• 当一个请求url的协议、域名、端口三者之间任意一个与当前也买你的url不同即为跨域：

二、设置代理——开发阶段解决跨域的问题

1、vue.config.js文件配置devServer

官网地址：https://cli.vuejs.org/zh/config/#devserver

const { defineConfig } = require('@vue/cli-service')
		module.exports = defineConfig({
		  transpileDependencies: true,
		  devServer:{
		    proxy:'http://localhost:3000'
		  }
		})

2、重启vue-cli项目即可

---

三、环境变量——生产阶段解决跨域问题（build后）

官网：https://cli.vuejs.org/zh/guide/mode-and-env.html

• why need 环境变量？ 生产阶段devServer所指向的proxy不生效，在此修改proxy无效。（其中的 process.env.VUE_APP_ BASE_API 在 .env 文件中设置，下文有）
  

可以通过设置根目录下新建 .env 文件（该文件为隐藏文件）来配置环境变量：

这里以下为例：

• 开发环境 : http://localhost:3000
• 生产环境 : http://testapi.xuexiluxian.cn

生产环境（prod）: .env.production

开发环境（dev）: .env.development

路由中的设置（axios二次封装中的）别忘啦：

axios二次封装request.js中将

//2. 创建axios对象
const service = axios.create({
	baseURL:'http://testapi.xuexiluxian.cn'
});：

部分修改为：

let url = '';
if( process.env.VUE_APP_URL =='production' ){
  url = process.env.VUE_APP_BASE_API
}

//2. 创建axios对象
const service = axios.create({
	baseURL:url
});

然后build打包到prod环境也不会产生跨域问题啦~

---

reference:

• https://blog.csdn.net/weixin_46872121/article/details/110312587?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7ECtr-2-110312587-blog-140187291.235%5Ev43%5Epc_blog_bottom_relevance_base6&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7ECtr-2-110312587-blog-140187291.235%5Ev43%5Epc_blog_bottom_relevance_base6&utm_relevant_index=5
• https://blog.csdn.net/qq_61552595/article/details/136147964
• https://www.bilibili.com/video/BV1ZZ421276D/?share_source=copy_web&vd_source=334dbcc5ec1e90276a3fca594c89e11e