玖叶教程网

前端编程开发入门

开发环境hbuilderx及上线服务器nginx下跨域接口配置及理解

前后端分离的项目都会存在跨域的问题.

比如,前端项目域名为www.xxxx.com,api接口为api.xxxx.com.这就是跨域,两个域名不一样。

1.开发环境的跨域,开发环境hbuilderx内置服务器,支持配置代理转发,可解决跨域问题

在uni-app 的项目中找到manifest.json这个配置文件,在该配置文件中配置跨域代理(代理服务器)

manifest.json

选择源码视图对manifest.json配置文件进行编辑:增加以下内容

"h5": {

"devServer": {

"port": 80,

"proxy": {

"/api/": {//根据实际请求接口写,以api开头的接口都会转发,如api/user

"target": "http://www.coding60.com",//要访问的api接口网址

"changeOrigin": true,

"secure": false

}

},

"https": false//ssl协议

}

2.上线后的跨域问题解决,上线后的运行环境为nginx,nginx是支持代理转发的。

找到该项目的配置文件,版本不同,配置文件位置不同,自行查找。

一般是xxxx.com.conf,在server{}里增加如下内容:

location /api/ {

proxy_pass https://api.xxxx.com;//注意细节网址末尾不要加/

proxy_set_header Host $host:$server_port;



}

总结,上线后的跨域一定要依赖于后端程序员进行服务器配置,前端没有配置权限此方法无法解决。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言