axios get怎么还会显示跨域_Vue--封装axios、跨域
封装axios
因为项目中很多组件中要通过Axios发送异步请求，所以封装一个Axios对象。自己封装的Axios在后续可以使用axios中提供的拦截器。
在src下创建一个utils目录，在utils目录下创建一个request.js文件
在public下创建一个db.json文件，写点数据，用来我们测试
之前我们使用axios发送请求的时候是使用的下面的方式
[
{"name":"张三","age":17},
{"name":"李四","age":52},
{"name":"王五","age":37}
]
db.json
import axios from 'axios'axios.get('./db.json').then(response =>{
console.log(response.data)
})
在components下的HelloWorld.vue中引用测试一下
在浏览器 的控制台就可以看到db.json里的数据，这种方法是我们之前的方法，现在我们要封装。
修改request.js文件
import axios from 'axios'const request=axios.create({
baseURL:'/', //基础路径,根据不同环境设置 baseURL, 最终发送请求时的URL为: baseURL + 发送请求时写URL ,
timeout: 5000 //超时时间，5000毫秒
})exportdefault request //导出自定义的axios对象
我们自己封装好了axios，那怎么测试知道我们封装的有没有问题，我们来进行测试
在src目录下创建一个api目录，在下面创建一个test.js文件
在test.js文件里写入如下代码
//@就是src目录的路径
import request from '@/utils/request'
//下面的这种是使用最原始的方式来发送get请求//request.get('/db.json').then(response =>{//console.log(response.data)//})
//以对象配置的方式进行指定请求方式//request({//method: 'get',//url: '/db.json'//}).then(response =>{//console.log('对象方式', response.data)//})
exportdefault{
getList(){
const res=request({
method:'get',
url:'/db.json'})returnres
}
}
在HelloWorld.vue的script标签里写如下代码
//导入接口
import testApi from '@/api/test'exportdefault{
data(){return{
list: {}
}
},
created(){//调用method里的fetchData方法
this.fetchData()
},
methods: {
fetchData(){
testApi.getList().then(response=>{
console.log('get3',response.data)this.list = response.data //给data里的list重新赋值
})
}
}
}//export default {//name: "HelloWorld",//props: {//msg: String//}//};
刷新浏览器，控制台里可以看到db.json里的数据，则我们的配置是没有问题的。
跨域
前后端分离时，前端和后端API服务器可能不在同一台主机上，就存在跨域问题，浏览器限制了跨域访问。
同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。
如下面示例存在跨域：
前端页面部署在：http://localhost:8001 即本地ip端口8001上；
后端API部署在： http://localhost:8002 即本地ip端口8002上 ;
它们IP一样，但是端口不一样，所以存在跨域问题。
演示跨域：
1.将 zz-mms\db.json 拷贝到 axios-demo\public\ 目录下，axios-demo 工程就是 复制了zz-mms 重命名了
2.axios-demo\vue-config.js 更改 端口号, 将端口号更改为 8001
3. 启动 axios-demo
npm run serve
启动后，查看控制台显示的访问地址，我的是 http://localhost:8001/
4. 查询是否可以直接访问到数据, 访问 http://localhost:8001/db.json
5. 修改 zz-mms\src\api\test.js , 发送请求给 8001 接口，修改下 BASE_URL 值
const BASE_URL = 'http://localhost:8001'
6. 重新刷新 页面, 查看控制台报错, 出现跨域问题.
跨域解决:
通过代理请求的方式解决，将 API 请求通过代理服务器请求到 API 服务器。
开发环境中，在 vue.config.js 文件中使用 devServer.proxy 选项进行代理配置。
参考：https://cli.vuejs.org/zh/config/#devserver
解决开发环境跨域问题
在 vue.config.js 文件中使用 devServer.proxy 选项进行代理配置
module.exports ={
devServer: {
port:8888, //端口号，如果端口被占用，会自动加1
host: "localhost", //主机名，127.0.0.1 真机 0.0.0.0
https: false, //协议
open: true, //启动服务时自动打开浏览器访问
proxy: { //开发环境代理配置
'dev-api':{ //匹配 /dev-api 开头的请求，
//目标服务器地址，代理访问http://localhost:8001
target: 'http://localhost:8001',
changeOrigin:true, //开启代理服务器
pathRewrite:{//会将 /dev-api 替换为 '',也就是 /dev-api 会移除，
//如 /dev-api/db.json 代理到 https://localhost:8080/db.json
'^dev-api': ''}
}
}
},
lintOnSave:false, //关闭格式检查
productionSourceMap: false //打包时不会生成.map文件，加快打包速度
}
vue.config.js
将 test.js 中的 修改如下：
//@就是src目录的路径
import request from '@/utils/request'
const BASE_URL= '/dev-api'exportdefault{
getList(){
const res=request({
method:'get',
url: BASE_URL+ '/db.json'})returnres
}
}
重启项目，防止不生效
配置不同环境 常量值
参考：https://cli.vuejs.org/zh/guide/mode-and-env.html
开发环境请求 Mock.js 获取数据，开发环境请求后台接口获取数据，不同环境请求的URL不一样，所以要为不同环境匹配不同请求接口URL，通过路径前缀进行匹配。当前只针对开发环境，后面会生产部署再讲生产如何实现。
1. 在 zz-mms 根目录下创建 .env.development 和 .env.production 文件，
.env.development 文件配置(注意开发和生产环境配置不要搞反了)
VUE_APP_SERVICE_URL 值可更改为你自已配置的 Easy-Mock 接口服务地址
#使用 VUE_APP_ 开头的变量会被 webpack 自动加载，process.env.VUE_APP_xxx
#开发环境的前缀
VUE_APP_BASE_API = '/dev-api'
#目标服务接口地址，是按照自己的环境来的，添加或更改服务后，需要重启服务
VUE_APP_SERVICE_URL = 'http://localhost:8001'
测试：在 main.js 中添加以下代码，看下浏览器控制台是否会输出
在项目任意模块文件中，都可以使用 process.env.VUE_APP_BASE_API 获取值
console.log(process.env.VUE_APP_BASE_API)
重构代理配置
在重构 vue.config.js 中的 devServer.proxy 代理配置
module.exports ={
devServer: {
port:8888, //端口号，如果端口被占用，会自动加1
host: "localhost", //主机名，127.0.0.1 真机 0.0.0.0
https: false, //协议
open: true, //启动服务时自动打开浏览器访问
proxy: { //开发环境代理配置
[process.env.VUE_APP_BASE_API]:{ //自动获取，注意要[],在.env.development里配置的
//目标服务器地址，在.env.development里配置的。代理访问http://localhost:8001
target: process.env.VUE_APP_SERVICE_URL,
changeOrigin:true, //开启代理服务器
pathRewrite:{
['^' + process.env.VUE_APP_BASE_API]: '' //自动获取
}
}
}
},
lintOnSave:false, //关闭格式检查
productionSourceMap: false //打包时不会生成.map文件，加快打包速度
}
修改 utils/request.js 文件配置： baseURL: process.env.VUE_APP_BASE_API
import axios from 'axios'const request=axios.create({
baseURL: process.env.VUE_APP_BASE_API,//基础路径,.env.development
timeout: 5000 //超时时间，5000毫秒
})//request.get('./db.json').then(response =>{ // 使用request。而不是使用axios//console.log(response.data)//})
export default request //导出自定义的axios对象
去掉 test.js 中的 BASE_URL
//@就是src目录的路径
import request from '@/utils/request'
exportdefault{
getList(){
const res=request({
method:'get',
url:'/db.json'})returnres
}
}
重启项目，再次访问