在开发环境下,页面路径是本地127.0.0.1:8080,然而获取数据时会用的服务器接口,所以就导致了开发环境下的跨域,采用proxyTable配置来解决
1,在config/index.js进行如下配置
proxyTable: {
'/api': {
target: 'https://xxxxxx.com', //后端接口地址
changeOrigin: true,//是否允许跨越
pathRewrite: {
'^/api': '/',//重写,
}
}
},
2,因有封装一个axios请求方法request
import axios from 'axios'
import store from '@/store'
import { Message} from 'element-ui'
import { getToken } from '@/utils/auth'
const service = axios.create({
baseURL: process.env.BASE_API, //注意: 因为这里
timeout: 5000 // request timeout
})
service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['X-Token'] = getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
}
return config
},
error => {
Promise.reject(error)
}
)
service.interceptors.response.use(
response => response,
error => {
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
3,在config/dev.env.js,如此之后就能使之后使用request()方法的url都是以/api开头了,
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"/api/"' //注意: 所以这里这样
})
4,然后在需要请求数据方法内如下使用就好了
import request from '@/utils/request'
export function fetchList(){
return request({
url: '/travel_app/findAllScenic.do',
method: 'POST'
})
}
比如后台接口是: https://xxxxxx.comtravel_app/findAllScenic.do
本地页面是: http://127.0.0.1:8080
跨域处理后就把访问后台的地址改为了:
这样就拿到了服务器上的数据啦