vue使用axios?post發(fā)送json數據跨域請求403的解決方案

更新時間：2023年12月26日 09:40:49 作者：尋夢丶2015

這篇文章主要介紹了vue使用axios?post發(fā)送json數據跨域請求403的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

1. 問題

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

2. 查找資料

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

說法一、

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

說法二、

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

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

3. 解決方法

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

4. 總結解決方法

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

后續(xù)補充：

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

后續(xù)更新：

注：本文所述的問題是基于后臺已經做了跨域處理的情況下，如果不確定后臺是否已經作跨域處理，建議先用原生的ajax或者jquery等進行問題排查，不要因為后臺的疏忽導致前端浪費時間去處理！??！

此次更新采用更規(guī)范更容易維護的方法來解決問題。

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

import axios from 'axios'
import { Notification } from 'element-ui'
 
// 創(chuàng)建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 debug
    Promise.reject(error)
  }
)
 
// response 攔截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.resultCode !== '000') { // 后臺返回碼，根據自己的業(yè)務進行修改
      Notification.error({
        title: '錯誤',
        message: res.resultDesc, // 錯誤描述信息
        duration: 0
      })
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    Notification.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'
    // }
  })
}

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