關于vue使用axios post發送json數據跨域請求403的解決方法：

1. 問題

vue開發的時候，使用axios跨域發送請求，同時post發送的數據格式是json格式，發送出去的時候發現控制臺報錯403，返回的信息提示是跨域的問題，但是后臺已經對跨域進行了處理，因此出現這個問題并不是后臺的問題，需要在前端解決，而且通過查看后臺的日志發現后臺根本沒有接收到請求。

2. 查找資料

網上找了很多資料，比如：

說法一、 通過設置post請求的header中的Content-Type值為application/x-www-form-urlencoded，然后重新發送請求，發現控制臺還是返回403跨域信息的錯誤；

說法二、 在設置post請求的header中的Content-Type值為application/x-www-form-urlencoded以后，使用transformRequest方法對發送的數據進行處理，這個時候奇跡發生了，請求發送出去了，并且成功獲取了后臺的響應，

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

3. 解決方法

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

4. 總結解決方法

設置全局post請求的Content-Type值為"text/plain"，然后在發送請求的時候需要對JSON數據進行stringify轉化一下即可完美解決問題！

• 當然可以不用設置全局，只需要單獨配置某個請求也是可以的，防止后面有其他類型的請求，造成污染。

注：瀏覽器跨域并不支持application/json的Content-Type，即使后臺設置了允許的跨域頭部參數，依然會報錯。

本文所述的問題是基于后臺已經做了跨域處理的情況下，如果不確定后臺是否已經作跨域處理，建議先用原生的ajax或者jquery等進行問題排查，不要因為后臺的疏忽導致前端浪費時間去處理！！！。此次更新采用更規范更容易維護的方法來解決問題。

將請求進行分離，統一處理所有的request和response，request.js代碼如下:

import axios from 'axios' import { Notification } from 'element-ui'// 創建axios實例 const service = axios.create({baseURL: process.env.BASE_API,timeout: 50000 // 請求超時時間 })// request攔截器 service.interceptors.request.use(config => {config.headers['Content-Type'] = 'text/plain' // 關鍵所在return config},error => {console.log(error) // for debugPromise.reject(error)} )// response 攔截器 service.interceptors.response.use(response => {const res = response.dataif (res.resultCode !== '000') { // 后臺返回碼，根據自己的業務進行修改Notification.error({title: '錯誤',message: res.resultDesc, // 錯誤描述信息duration: 0})return Promise.reject('error')} else {return response.data}},error => {console.log('err' + error) // for debugNotification.error({title: '錯誤',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: { // 已經在request.js里面進行全局設置，也可以在請求里面局部設置其他headers// 'Content-Type': 'text/plain'// }}) }

發送請求，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)})

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。