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

二、跨域原因：

由于浏览器同源策略，即：端口号、域名、协议、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 // 缓存，可不设置
]

uniapp跨域设置相关推荐

uni-app跨域的解决以及如何封住api，请求接口
uni-app跨域的解决以及如何封住api,请求接口 let request = function(url, data = {}, method = "GET") {return ...
微信小程序开发uni-app 跨域处理服务器搭建仓库 VueX tabBar
一.uni-app简介官网:https://uniapp.dcloud.io/ PC端:移动端:(APP,WebApp):纯原生:(IOS,Android ) 应用商店:H5 Hybrid 模式(混 ...
uni-app跨域和 Vue 跨域
1.URL 地址重写不要错误,犯低级错误. 2. 后端接受请求,查看URL是否重写,前端代理是否生效 3.要用浏览器测试跨域问题一般axios封装 BaseUrl="http://127. ...
【SpringMVC】与权限拦截器冲突导致的Cors跨域设置失效问题
问题描述前端域名FE.com向后端域名BE.com分别请求访问优惠券的列表和提交新增的优惠券,API设计所用的Method分别为Get和Post,结果为前一次访问成功而后一次访问失败.这两次请求都是 ...
chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security...
chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\ XP:C:\Documents and Settings ...
浏览器允许跨域设置（不用于生产环境，开发用）
Firefox 之前看过FF下关闭跨域限制的方法: firefox安全性强,不允许跨域调用.Firefox 要取消XMLHttpRequest的跨域限制的话从 about:config 里设置 si ...
yii2 跨域请求配置_伸手党系列四：vuecli3.0以上使用 proxy 进行跨域设置
跨域:出于浏览器的同源策略限制,当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域. process:process 对象是一个全局变量,它提供有关当前 Node.js 进 ...
data 谷歌浏览器更改user 路径_chrome浏览器的跨域设置——包括版本49前后两种设置...
做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提 ...
SSO单点登录、跨域重定向、跨域设置Cookie、京东单点登录实例分析
最近在研究SSO单点登录技术,其中有一种就是通过js的跨域设置cookie来达到单点登录目的的,下面就已京东商城为例来解释下跨域设置cookie的过程涉及的关键知识点: 1.jQuery ajax跨 ...

uniapp跨域设置

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

二、跨域原因：

三、跨域的解决方法

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

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

四、开发环境和生产环境

uniapp跨域设置相关推荐

最新文章

热门文章

uniapp跨域设置

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

二、跨域原因：

三、跨域的解决方法

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

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

四、开发环境和生产环境

uniapp跨域设置相关推荐

最新文章

热门文章

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