vue(axios),uniapp前端跨域处理

1. axios跨域处理

vue.config.js文件中处理

  在vue.config.js中添加跨域代理的相关配置,没有vue.config.js文件可以自己手动添加。
  关键内容如下:
 module.exports = {  
	...其他配置项
	devServer: {
		open: true,
		overlay: {
		  warnings: false,
		  errors: true
		},
		// 3.开发环境进行http的代理 
		//  ========关键部分=========
		proxy: {
			   // 匹配 url 路径的开头
			  '/api': {     
// 标识符号(自定义)  请求的路径只要是/api开头都会代理到下面这个target网站。	
// 例如:'/api/xxxx' 会代理到 http://localhost:8095/api/xxxx
				target: 'http://localhost:8095',     //请求的接口的基本路径
				changeOrigin: true,    //是否修改请求头中的host
				pathRewrite: { '^/api': '/' }          //标识符重写(重要!在后端接收到请求的接口路径时要把前端添加的'/api'标识符去掉,不然找不到对应的接口)
			  }
			}
		},
		//  ========关键部分=========
		configureWebpack: () => {},
}

2. uniapp跨域处理

manifest.json文件中处理

 源码视图>找到 h5的配置项,添加如下代码

具体配置项详细解释如上vue.config.js文件中的解释

  "h5" : {
        "devServer" : {
            "https" : false,
            "proxy" : {
                "/api" : {
                    "target" : "http://localhost:8095",   
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/api" : ""
                    }
                }
            }
        },
        "domain" : ""
    },

你可能感兴趣的:(前端实用知识学习,vue,uni-app,ajax跨域问题)