vue跨域问题Response to preflight request doesn‘t pass access control check: No ‘Access

admin管理员组

文章数量:1794759

vue跨域问题Response to preflight request doesn‘t pass access control check: No ‘Access

每天一个报错，个各不相同。

看见下面的这行报错是不是感觉跟熟悉？

没错，vue的跨域问题，记录一下我的解决方法并分享给大家 ~ . ~

Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

那就直接上代码？

module.exports = { devServer: { open: true, //自动打开浏览器 host: 'localhost', port: 8080, https: false, //以上的ip和端口是我们本机的;下面为需要跨域的 proxy: {//配置跨域 '/api': { target: '11111111111',//填写你们真实的后台接口 ws: true, changOrigin: true,//允许跨域 pathRewrite: { '^/api': ''//请求的时候使用这个api就可以 } } } } }

我的vue文件中没有config文件夹，所以新建了个vue.config.js文件，放在根路径就好。

需要跨域的页面

mounted(){ this.job() }, methods:{ job(){ post("/api/index.php/user/index/postList",{ //这个里面的写路径的后面一部分，前面记得加上/api token:"", page: this.page, count: this.count, type: this.type, }) .then((res) => { console.log(res); }) .catch(function (err) { console.log("请求失败"); }); }, },

然后信心满满的重启项目，再次运行，还是报错…

仔细找了一遍，发现封装axios的文件里面加了baseURL，会在发送请求时自动拼接到url的头部

const instance = axios.create({ // baseURL: "whlt.51job-ideal", //baseURL会在发送请求时拼接在url头部 timeout: 5000, headers: { "Content-Type": "application/json;charset=utf-8", }, });

将这一行注释掉，重启项目，拿到数据。

以下是我axios的封装（以防万一某些小伙伴复制代码运行不了 > . < ）

import axios from "axios"; const instance = axios.create({ // baseURL: "whlt.51job-ideal", //baseURL会在发送请求时拼接在url头部 timeout: 5000, headers: { "Content-Type": "application/json;charset=utf-8", }, }); axios.defaults.withCredentials = true; //true允许跨域 if (process.env.NODE_ENV === "production") { /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/ if (process.env.VUE_APP_FLAG === "pro") { //production 生产环境 axios.defaults.baseURL = "localhost:8080"; } else { //test 测试环境 axios.defaults.baseURL = ""; } } else { //dev 开发环境 axios.defaults.baseURL = "localhost:8080"; } //请求拦截 instance.interceptors.request.use( function (config) { console.log("全局请求拦截"); console.log(config); return config; }, function (err) { return Promise.reject(err); } ); //响应拦截 instance.interceptors.response.use( (response) => { // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 // 否则的话抛出错误 if (response.status === 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, // 服务器状态码不是2开头的的情况 (error) => { if (error.response.status) { switch (error.response.status) { // 401: 未登录 case 401: router.replace({ path: "/login", query: { redirect: router.currentRoute.fullPath, }, }); break; case 403: this.$message("管理员权限已修改请重新登录"); // 清除sessionStorage // storemit("qiut"); // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 setTimeout(() => { router.replace({ path: "/login", query: { redirect: router.currentRoute.fullPath, }, }); }, 1000); break; // 404请求不存在 case 404: this.$message("请求页面飞到火星去了"); break; } return Promise.reject(error.response); } } ); //封装get请求 export function get(url, params) { return instance.get(url, { params, }); } //封装post请求 export function post(url, data) { return instance.post(url, data); } // import { post } from "../../utils/request"; 调用

记得在需要调用的页面引入噢

import { post } from "../../utils/request";

技术不太好，见笑了哈，大家分享问题，一起共同成长。

本文标签： preflightrequestVueresponsepass