首页 > 其他分享 >Vue跨域详解

Vue跨域详解

时间:2023-05-16 12:33:11浏览次数:34  
标签:Vue 跨域 url break 详解 params error message config

碰到这种问题,其实你的接口已经通了,但是在页面上就是访问不通过。

你可以把API请求地址单独拎出来新开个网站打开看请求是否成功,成功,但是你的项目不通。

有那么几个可能吧:

  1、请求头设置错误

headers = {
		'Content-Type': 'application/json' //错误的
          'Content-Type':'application/x-www-form-urlencoded' // 正确的 }

  2、本地运行要配置反向代理

最基础的配置

3、环境配置

当然你还需要配置你的环境配置文件(.env.dev   .env.production 等)

NODE_ENV='production' / 'development'   // 二选一,一个开发环境一个生产环境,部署服务器要用开发环境的
VUE_APP_RUN_ENV='dev'/'pro'/'test'  // 三选一可以自定义名字,按你定义的环境来定,自己分得清就行。只是一个标识
VUE_APP_BASE_URL = '' //这里是你请求后端的域名地址

假如你配置了多种环境那么你还需要配置下package.json文件

 --mode 后面是你配置的环境文件的 NODE_ENV 名字

 

 4、假如你用的是axios来作请求插件,那么还需要配置下axios

/****   request.js   ****/
// 导入axios
import axios from 'axios'
// 导入本地缓存
import {
    setStore,
    getStore
} from '../../util/lostore.js'
// 使用element-ui Message做消息提醒
import {
    Message
} from 'element-ui';
//1. 创建新的axios实例,
const service = axios.create({
    // 公共接口--这里注意后面会讲
    baseURL: process.env.VUE_APP_BASE_URL,
    // 超时时间 单位是ms,这里设置了5s的超时时间
    timeout: 5 * 1000
})
// 2.请求拦截器
service.interceptors.request.use(config => {
    //发请求前做的一些处理,数据转化,配置请求头,设置token,设置loading等,根据需求去添加
    config.data.__userToken = getStore('userToken')
    config.data = config.data; //数据转化,也可以使用qs转换
    config.headers = {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
    return config
}, error => {
    Promise.reject(error)
})

// 3.响应拦截器
service.interceptors.response.use(response => {
    //接收到响应数据并成功后的一些共有的处理,关闭loading等
    return response.data
}, error => {
    /***** 接收到异常响应的处理开始 *****/
    if (error && error.response) {
        // 1.公共错误处理
        // 2.根据响应码具体处理
        // switch (error.response.status) {
        //     case 400:
        //         error.message = '错误请求'
        //         break;
        //     case 401:
        //         error.message = '未授权,请重新登录'
        //         break;
        //     case 403:
        //         error.message = '拒绝访问'
        //         break;
        //     case 404:
        //         error.message = '请求错误,未找到该资源'
        //         // window.location.href = "/NotFound"
        //         break;
        //     case 405:
        //         error.message = '请求方法未允许'
        //         break;
        //     case 408:
        //         error.message = '请求超时'
        //         break;
        //     case 500:
        //         error.message = '服务器端出错'
        //         break;
        //     case 501:
        //         error.message = '网络未实现'
        //         break;
        //     case 502:
        //         error.message = '网络错误'
        //         break;
        //     case 503:
        //         error.message = '服务不可用'
        //         break;
        //     case 504:
        //         error.message = '网络超时'
        //         break;
        //     case 505:
        //         error.message = 'http版本不支持该请求'
        //         break;
        //     default:
        //         error.message = `连接错误${error.response.status}`
        // }
    } else {
        // 超时处理
        if (JSON.stringify(error).includes('timeout')) {
            Message.error('服务器响应超时,请刷新当前页')
        }
        error.message = '连接服务器失败'
    }

    Message.error(error.message)
    /***** 处理结束 *****/
    //如果不需要错误处理,以上的处理过程都可省略
    return Promise.resolve(error.response)
})
//4.导入文件
export default service

封装统一的GET POST等常见的请求Function

/****   http.js   ****/
// 导入封装好的axios实例
import request from './request'

const http = {
    /**
     * methods: 请求
     * @param url 请求地址
     * @param params 请求参数
     */
    get(url, params) {
        const config = {
            method: 'get',
            url: url
        }
        if (params) config.params = params
        return request(config)
    },
    post(url, params) {
        const config = {
            method: 'post',
            url: url
        }
        if (params) config.data = params
        return request(config)
    },
    put(url, params) {
        const config = {
            method: 'put',
            url: url
        }
        if (params) config.params = params
        return request(config)
    },
    delete(url, params) {
        const config = {
            method: 'delete',
            url: url
        }
        if (params) config.params = params
        return request(config)
    }
}
//导出
export default http

再封装个api接口方法,妈呀停不下来了

// api.js
import request from "../common/axios/request.js"; // 例子 export function xxx(params) { return request({ url: "/login", method: "post", data: params }); } export function xxx(params) { return request({ url: "/login", method: "get", params: params }); }

ok,当你页面调用的时候就可以这样用:

首先引用你的接口api方法
import {
xxx
} from '../api/api.js'

然后在created或者mouted里就可以直接调用xxx方法啦
xxx(params).then(res => {
  console.log(res)
})

 

至此你可以试着去运行项目了

标签:Vue,跨域,url,break,详解,params,error,message,config
From: https://www.cnblogs.com/linboomboom/p/17404579.html

相关文章

  • Vue、React和小程序都是流行的前端开发框架/平台
    Vue、React和小程序都是流行的前端开发框架/平台,它们各有优缺点。Vue的优点:简单易学:Vue的语法简单明了,易于理解和学习。渐进式框架:Vue可以逐渐地集成到现有项目中,也可以作为完整的单页应用程序开发。响应式设计:Vue的响应式设计使得数据变化后UI自动更新,方便快捷。高......
  • vue contenteditable处理火狐浏览器复制带标签问题
    this.$refs.materialTxt.addEventListener('paste',function(e){console.log('监听到了')e.stopPropagation()e.preventDefault()lettext='';constevent=(e.originalEvent||e)if(event.c......
  • Android AlertDialog 详解
    创建对话框一个对话框一般是一个出现在当前Activity之上的一个小窗口.处于下面的Activity失去焦点,对话框接受所有的用户交互.对话框一般用于提示信息和与当前应用程序直接相关的小功能.AndroidAPI支持下列类型的对话框对象:警告对话框AlertDialog: 一个可以有......
  • Vue.js(九) 第三方常用插件
    1.Vue.jsdevtools用于开发调试Vue.js的一个必备插件。可以在Chrome中的扩展程序中直接安装,也可以本地文件的方式安装。2.nprogress页面顶部进度条当路由切换事会在浏览器的顶部出现一个蓝色进度条用于表示路由切换的进度,并在又上角有个蓝色loading的动画。一般情况下切换到目标......
  • Vue.js(十) element-ui PC端组件库
    一:简介饿了么公司基于Vue开发了两套UI组件库,PC端组件库和移动端组件库。一部分组件库是对原生的HTML标签元素的封装,增加了一些新的功能。另一部分组件库是原生HTML标签元素没有的,是一些比较常用的独立的功能(如:分页、进度条、加载中、树形控件等),将这些独立的常用的功能封装成......
  • MATLAB快速傅里叶变换(fft)函数详解
    MATLAB快速傅里叶变换(fft)函数详解调用:​​1.Y=fft(y);Y=fft(y,N);式中,y是序列,Y是序列的快速傅里叶变换。y可以是一向量或矩阵,若y为向量,则Y是y的FFT,并且与y具有相同的长度。若y为一矩阵,则Y是对矩阵的每一列向量进行FFT。说明:函数fft返回值的数据结构具有对称性根据采样定......
  • Docker详解
    什么是docker?Docker是一个应用打包、分发、部署的工具你也可以把它理解为一个轻量的虚拟机,它只虚拟你软件需要的运行环境,多余的一点都不要,而普通虚拟机则是一个完整而庞大的系统,包含各种不管你要不要的软件。打包:就是把你软件运行所需的依赖,第三方库,软件打包打包在一起......
  • element-plus + VUE3 项目 build 之后 el-cascader无法选中而且导致整个网页卡顿
    cascader不能用v-model接收值,需要改为model-value方式<el-cascadermodel-value="selRegion":options="RegionTreeCascader":show-all-levels="true"separator="-":props="{checkStrictly:true,expandTrigger:'hove......
  • vue报错EISDIR: illegal operation on a directory, read解决
    报错:EISDIR:illegaloperationonadirectory,readInternalservererror:EISDIR:illegaloperationonadirectory,read原因:引入子组件时,子组件是xxx/文件夹名/index.vue,引入只写到了xxx/文件夹名解决:引入子组件时,路径写到xxx/文件夹名/index.vue......
  • Explain执行计划key_len详解
    我们在使用Explain查看SQL执行计划时,其中有一列为key_kenEXPLAINselect*FROMuserWHEREid=1;key_len表示使用的索引长度,key_len可以衡量索引的好坏,key_len越小索引效果越好,那么key_len的长度是如何计算的?常见的列类型长度计算:CREATETABLE`user`(`id`bigint......