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

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

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

没错，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: 'http://11111111111.com',//填写你们真实的后台接口ws: true,changOrigin: true,//允许跨域pathRewrite: {'^/api': ''//请求的时候使用这个api就可以}}}}
}

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

需要跨域的页面

mounted(){this.job()},methods:{job(){post("/api/index.php/user/index/postList",{  //这个里面的写路径的后面一部分，前面记得加上/apitoken:"",           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: "http://whlt.51job-ideal.com", //baseURL会在发送请求时拼接在url头部timeout: 5000,headers: {"Content-Type": "application/json;charset=utf-8",},
});

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

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

import axios from "axios";const instance = axios.create({// baseURL: "http://whlt.51job-ideal.com", //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 = "http://localhost:8080";} else {//test 测试环境axios.defaults.baseURL = "";}
} else {//dev 开发环境axios.defaults.baseURL = "http://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// store.commit("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";

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

vue跨域问题Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Ori相关推荐

跨域：Response to preflight request doesn t pass access control check: No Access-Control-Allow-Origin
第一.找到config/index.js 设置proxyTable,实际上就是设置代理路径(PS:设置config文件之后,需要重新npm run dev) dev: {env: require('. ...
Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin跨域问题
出现问题:在本地运行,有配置vue.config.js中的proxy,所以解决了跨域问题.但将项目打包放到服务器上去,在打包的过程中,proxy是不会被打包进去的,也就是说代理所配置的跨域就已经失效了 ...
关于跨域 Response to preflight request doesn‘t pass access control check
做项目的时候由于访问了不同的服务器,然后导致了跨域问题,报错情况为: has been blocked by CORS policy: Response to preflight request do ...
跨域 Response to preflight request doesn‘t pass access control check: It does not have HTTP ok status.
在登录的时候没有跨域问题, token 认证的时候就跨域了(请求拦截器中配置的请求头携带 token),有点玄学了. 后端没有报错,不过显示请求方法为 OPTION 预检请求.前端报错如下,解决也很简 ...
跨域Response to preflight request doesn‘t pass access control check: It does not have HTTP ok status.
最近后端添加自定义请求头拦截器后,前端也增加请求头后,解决过程中先后出现两种跨域错误. 一.请求后台出现如下跨域问题: has been blocked by CORS policy: Respons ...
关于Springboot中跨域问题的解决(Response to preflight request doesn‘t pass access control check)
Springboot中跨域问题的解决等不及的小伙伴,直接跳到结论部分即可,谢谢!!! 1. 背景 1.1 使用技术栈 Spring Security Springboot Vue.axios Jwt ...
Response to preflight request doesn‘t pass access control check: The value of the ‘Access-Control-Al
错误:Response to preflight request doesn't pass access control check: The value of the 'Access-Control ...
浏览器预检请求返回400 has been blocked by CORS policy: Response to preflight request doesn’t pass access cont
这个问题也是很过分头一次遇到,原因是谷歌浏览器在有跨域(CORS)请求时,会先发送一个preflight(预检)请求,之后才会发送fetch请求. CORS:跨源资源共享 (CORS)(或通俗地译为跨 ...
has been blocked by CORS policy: Response to preflight request doesn‘t pass access control check
has been blocked by CORS policy: Response to preflight request doesn't pass access control check 这个错 ...

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

vue跨域问题Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Ori相关推荐

最新文章

热门文章