解决方案:jsonp

访问接口是有可能需要跨域和传cookie,还要注意jquery版本
npm install jquery@3 --save
最好用,一般不出错的解决方法

      $.ajax({
        url: "调用的接口",
        type: "get",
        dataType: "jsonp", //指定服务器返回的数据类型
        jsonpCallback: "showData", //指定回调函数名称
        xhrFields: { withCredentials: true },//配置开启,跨域请求是否携带cookie
        crossDomain: true,//跨域开启
        async: true,//不同步请求
        success: function (data) {
          _this.setName(data.UserName, data.IsAdvIP);
        },
      });

npm install jsonp

//jsonp方法
			 jsonp('接口地址', { params参数})
			 	.then((res) => {
			 		console.log(res);
			 		resolve();
			 	})
			 	.catch((err) => {
					// console.log(err)
				});

解决方案:vue配置代理

经常不管用,可能是少了什么配置导致的把

module.exports = {
...
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true,
    },
    hot: true,
    hotOnly: true,
    disableHostCheck: true,
    historyApiFallback: true,
    proxy: {
      "/aseanapi": {
        target: "", // 目标请求的地址端口号是5000
        pathRewrite: { "^/aseanapi": "" }, //重写路径  匹配以/api1为开头的路径都变为空字符串 (确保url路径是正确的)
        changeOrigin: true, //用于控制请求头中的host值
        cookieDomainRewrite: {
          "*": "localhost",
        },
      },
      [process.env.VUE_APP_BASE_API]: {
        target: '',
        changeOrigin: true,//开启跨域
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "",
        },
      },
      "user-api": {
        target: "",
        changeOrigin: true,
        pathRewrite: {
          "^user-api": "",
        },
        cookieDomainRewrite: {
          "*": "localhost",
        },
      },
    },
  },

}

vue3跨域

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { functionsScanner, copyFile } from 'wpsjs/vite_plugins'

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    copyFile({
      src: 'manifest.xml',
      dest: 'manifest.xml'
    }),
    functionsScanner({
      inputJsPath: 'src/components/js/functions.js',
      outputJsonPath: 'functions.json',
      namespace: 'HelloEt'
    }),
    vue()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    host: '0.0.0.0', // 允许局域网访问
    allowedHosts: ['all', 'lsh.drcnet.com.cn'], // ✅ 显式允许你的域名
    port: 80, // 你自己的端口(按需改)
    cors: true // 允许跨域
  }
})

解决方案:nginx反向代理

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐