vue和uniapp跨域配置

最新推荐文章于 2024-08-12 21:15:00 发布

weixin_45868762

最新推荐文章于 2024-08-12 21:15:00 发布

阅读量732

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45868762/article/details/110848750

版权

vue和uniapp跨域配置

在uniapp中h5调用接口调试会出现跨域问题

在manifest.json文件中的，配置

"h5": {
		 "devServer" : {
		 	"https" : false,
		 	"proxy": {  
		 		"/web": {  
		 			"target": "https://*****.com",
		 			"changeOrigin": true,   
		 			"secure": false,
		 			"pathRewrite": {
		 				"^/web": "/"  
		 			}  
		 		}  
		 	}  
		 }
	}

二、当在vue中
创建一个完整的vue项目时
在文件config>index.js

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'https://****.com',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,    //這裡true表示实现跨域
			  secure: false,  // 设置支持https协议的代理
        pathRewrite: {
          '^/api':'/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      }
    },
//一般需要配置上面这一段
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

  },

2.当手动搭建环境时
直接在webpack.config.js中配置

//配置跨域问题
devServer: {
        // historyApiFallback: true,
        // hot: true,
        // inline: true,
        // contentBase: "./app",//指定托管的根目录
        // port: 3000,
        proxy: {
            "/api": {
              target: 'http://localhost:8888',
              pathRewrite: {'^/api' : ''},
              changeOrigin: true,  // target是域名的话，需要这个参数，
			  secure: false,  // 设置支持https协议的代理
            }
        },
    },