關(guān)于vue使用axios post發(fā)送json數(shù)據(jù)跨域請(qǐng)求403的解決方法：

1. 問題

vue開發(fā)的時(shí)候，使用axios跨域發(fā)送請(qǐng)求，同時(shí)post發(fā)送的數(shù)據(jù)格式是json格式，發(fā)送出去的時(shí)候發(fā)現(xiàn)控制臺(tái)報(bào)錯(cuò)403，返回的信息提示是跨域的問題，但是后臺(tái)已經(jīng)對(duì)跨域進(jìn)行了處理，因此出現(xiàn)這個(gè)問題并不是后臺(tái)的問題，需要在前端解決，而且通過查看后臺(tái)的日志發(fā)現(xiàn)后臺(tái)根本沒有接收到請(qǐng)求。

2. 查找資料

網(wǎng)上找了很多資料，比如：

說法一、 通過設(shè)置post請(qǐng)求的header中的Content-Type值為application/x-www-form-urlencoded，然后重新發(fā)送請(qǐng)求，發(fā)現(xiàn)控制臺(tái)還是返回403跨域信息的錯(cuò)誤；

說法二、 在設(shè)置post請(qǐng)求的header中的Content-Type值為application/x-www-form-urlencoded以后，使用transformRequest方法對(duì)發(fā)送的數(shù)據(jù)進(jìn)行處理，這個(gè)時(shí)候奇跡發(fā)生了，請(qǐng)求發(fā)送出去了，并且成功獲取了后臺(tái)的響應(yīng)，

但是，發(fā)現(xiàn)這種方法存在一個(gè)問題，就是發(fā)送出去的數(shù)據(jù)不是JSON格式，而是字符串格式，真是令人頭大，然后不管我怎么折騰都沒有把這個(gè)方法解決。

3. 解決方法

就在這個(gè)問題陷入僵局的時(shí)候，我突然想到之前使用jquery的時(shí)候也曾經(jīng)遇到過相關(guān)的問題，但是通過設(shè)置Content-Type的值為"text/plain"解決的問題，于是乎我將post請(qǐng)求的headers中的Content-Type的值從application/x-www-form-urlencoded修改為text/plain，然后重新發(fā)送請(qǐng)求，這個(gè)時(shí)候，奇跡再次發(fā)生了，問題解決了！

4. 總結(jié)解決方法

設(shè)置全局post請(qǐng)求的Content-Type值為"text/plain"，然后在發(fā)送請(qǐng)求的時(shí)候需要對(duì)JSON數(shù)據(jù)進(jìn)行stringify轉(zhuǎn)化一下即可完美解決問題！

• 當(dāng)然可以不用設(shè)置全局，只需要單獨(dú)配置某個(gè)請(qǐng)求也是可以的，防止后面有其他類型的請(qǐng)求，造成污染。

注：瀏覽器跨域并不支持application/json的Content-Type，即使后臺(tái)設(shè)置了允許的跨域頭部參數(shù)，依然會(huì)報(bào)錯(cuò)。

本文所述的問題是基于后臺(tái)已經(jīng)做了跨域處理的情況下，如果不確定后臺(tái)是否已經(jīng)作跨域處理，建議先用原生的ajax或者jquery等進(jìn)行問題排查，不要因?yàn)楹笈_(tái)的疏忽導(dǎo)致前端浪費(fèi)時(shí)間去處理！！！。此次更新采用更規(guī)范更容易維護(hù)的方法來(lái)解決問題。

將請(qǐng)求進(jìn)行分離，統(tǒng)一處理所有的request和response，request.js代碼如下:

import axios from 'axios' import { Notification } from 'element-ui'// 創(chuàng)建axios實(shí)例 const service = axios.create({baseURL: process.env.BASE_API,timeout: 50000 // 請(qǐng)求超時(shí)時(shí)間 })// request攔截器 service.interceptors.request.use(config => {config.headers['Content-Type'] = 'text/plain' // 關(guān)鍵所在return config},error => {console.log(error) // for debugPromise.reject(error)} )// response 攔截器 service.interceptors.response.use(response => {const res = response.dataif (res.resultCode !== '000') { // 后臺(tái)返回碼，根據(jù)自己的業(yè)務(wù)進(jìn)行修改Notification.error({title: '錯(cuò)誤',message: res.resultDesc, // 錯(cuò)誤描述信息duration: 0})return Promise.reject('error')} else {return response.data}},error => {console.log('err' + error) // for debugNotification.error({title: '錯(cuò)誤',message: error,duration: 0})return Promise.reject(error)} )export default service

引用，test.js：

import request from '@/utils/request'export function sendRequest(params) {return request({url: '/services/test',method: 'post',data: JSON.stringify(params),// header: { // 已經(jīng)在request.js里面進(jìn)行全局設(shè)置，也可以在請(qǐng)求里面局部設(shè)置其他headers// 'Content-Type': 'text/plain'// }}) }

發(fā)送請(qǐng)求，test.vue:

import { sendRequest } from '@/api/request'let postData = {'serviceType': 'logQuery','occurTime': new Date(),'key': scope.row.key,'type': scope.row.type}sendRequest(postData).then(response => {console.log(response)})

總結(jié)

以上是生活随笔為你收集整理的vue 前端设置允许跨域_web 前端的一些小问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。