jsonp跨域与 vue3 跨域

最新推荐文章于 2024-09-24 18:02:36 发布

雷欧、给勃公子看茶

最新推荐文章于 2024-09-24 18:02:36 发布

阅读量1.6k

点赞数

本文链接：https://blog.youkuaiyun.com/paaaaak/article/details/108255792

版权

本文介绍了在Vue3中实现跨域的一种方法——正向代理，详细讲解了如何配置vue.config.js进行代理设置，解决ajax请求的跨域问题。通过设置基地址和proxy的匹配规则，将请求转发至目标服务器，从而实现跨域请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、jQuery

$.ajax({
      type: "POST",
      url: "http://v.juhe.cn/joke/content/list.php",
      data: {
        key: 'e0d*******aec169c62b3726a84e6948', // 这个不方便透露
        page: 2,
        sort: 'asc',
        time: 1418816972
      },
      dataType: "jsonp", //解决跨域只用这一句
      success: function(res){
        console.log(res)
      }
    })

！！！！！！！！！！！重点来了！！！！！！！！！！！
2、 vue3 正向代理跨域

ajax发送请求的 js文件这里我没有写URL

import ajax from '@/utils/request'
export const getBookDetails = ISBN => {
  return ajax({
    method: 'GET',
    params: {
      key: 'e0d956e026aec169c62b3726a84e6948',
      page: 2,
      sort: 'asc',
      time: 1418816972
    },
    success: function (res) {
      console.log(123)
      console.log(res)
    }
  })
}

request.js 这里的基地址直接复制我的即可。

import axios from 'axios'
// 添加一个新的axios实例
const request = axios.create({
  baseURL: '/dev-api',
  timeout: 20000 //请求超时时间
})
export default request

vue.config.js （自己创建这个文件） proxy的下一行 ‘/dev-api’ 的意思就是匹配以 '/dev-api’开头的请求路径，上面一步，我们把基地址设置为 ‘/dev-api’ ，所以我们就会匹配到这个请求，然后用 target 中的路径替换上一步的基地址 ‘/dev-api’，当然NetWork 的 Request URL 中是看不出来的。

module.exports = {
  // 选项
  devServer: {
    disableHostCheck: true,
    proxy: {
      '/dev-api': { // 匹配所有以 '/dev-api'开头的请求路径
        target: 'http://v.juhe.cn/joke/content/list.php', // 代理目标的基础路径
        changeOrigin: true, // 支持跨域
        pathRewrite: { // 重写路径: 去掉路径中开头的'/dev-api'
          '^/dev-api': ''
        }
      },
    },
    historyApiFallback: true,//解决路由history模式引起的问题
  }
}