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

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

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

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

在uni-app 的项目中找到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;

}

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