uniapp跨域设置

一、在前后端开发过程中，请求接口时，出现跨域问题

二、跨域原因：

由于浏览器同源策略，即：端口号、域名、协议、IP地址必须一致，否则请求将被浏览器拦截。

三、跨域的解决方法

方法1.在manifest.json的代码视图中  根节点中配置h5

 如果需要也可以配置多个跨域地址

        "devServer" : {
            // "port" : 8080, //浏览器运行端口
            "https" : false,
            "proxy" : {
                "/baseUrlTest" : {
                    "target" : "http://192.168.1.34:8084",
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/baseUrlTest" : ""
                    }
                },
                "/baseUrlBuild" : {
                    "target" : "http://zhbz-test.xxx.com",
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/baseUrlBuild" : "" //路径重写，将接口路径中以/api开头的部分替换掉
                    }
                }
            }
        },

配置好跨域地址，我们如何使用呢

const BASE_URL = "baseUrlTest";	
const xxx = BASE_URL + "/api/tool/xxx", 

方法2.在项目根目录下（即跟App.vue同级）建vue.config.js，这个文件会默认优先加载

module.exports = {
	devServer:{
		port:'8080',
		disableHostCheck:true,
		proxy:{
			'/dpc':{
				target:'http://XXXXX:9088',
				changeOrigin:true,
				pathRewrite:{
					'^/dpc': ''
				}
			}
		}
	}
}

四、开发环境和生产环境

有的小伙伴开发过程中配置了跨域，也能正常请求接口。当把代码上传服务器的时候，发现接口全都报错了。

这是因为生产环境不需要设置跨域代理，我们只需要把之前的接口路径修改成正确的地址就可以了。

如果生产环境出现跨域问题我们可以让后端进行跨域设置cors，php核心代码如下

'cors'=>[
  'Origin' => ['*'], // 允许跨域的请求源
  'Access-Control-Request-Method' => ['*'], // 接收的请求方法
  'Access-Control-Request-Headers' => ['*'], // 请求头接收类型
  'Access-Control-Allow-Credentials' => false,  // 是否允许请求携带 cookie，注意这里如果设置为true，则会报错 
  'Access-Control-Max-Age' => 3600 // 缓存，可不设置
]