HOST前后端分离小操作

“本地测试项目配置域名小操作

    相关文章【欢迎关注该公众号“一路向东”】(CORS处理跨域问题):

CORS跨域问题配置白名单CORS_ORIGIN_WHITELIST

HOSTS

    本地测试域名必然少不了修改:C:/Windows/System32/driver/etc/host文件,比如(注意中间的空格)

127.0.0.1  www.haha.com

如果前后端分离往往需要两个比如:

127.0.0.1 www.haha.com   # 前端页面
127.0.0.1 www.api.com      # 后端

    如果是CORS跨域处理,假设是django的跨域处理,假设前端端口为8080,后端端口使用8000,那么此时简单配置:

# 允许哪些域名访问Django

ALLOWED_HOSTS = ['127.0.0.1', 'Localhost', 'www.haha.com', 'www.api.com']

​# CORS追加白名单(显然针对的是前端域名)(后端可能自己识别不到自己吗?)CORS_ORIGIN_WHITELIST = (    'http://127.0.0.1:8080',    'http://localhost:8080',    'http://www.haha.com:8080',    'http://www.api.com:8000',)

    【detail】这里为什么要把后端的域名也拿进来?显然后期拿该域名去访问127.0.0.1:8000也会被识别为跨域,因此也需要加入白名单中。

front-end

    前端的处理更为简易,一般我们会用一个host.js文件把host域名统一管理,后期也便于修改。之后在js文件中直接使用和在html文件中直接导入即可。

    取01的例子:

// host.jsvar host = 'http://www.haha.com:8080'

{# xxx.html #}<script type="text/javascript" src="js/hosts.js"></script>

以js文件的axios用法为例,一般还需引入host变量,host:host。

// xxx.js/*axios.get('http://127.0.0.1:8000' + '/', {
   
     responseType: 'json'}). then (...)*/axios.get(this.host + '/', {
   
     responseType: 'json'}). then (...)

猜你喜欢

转载自blog.csdn.net/lxd_max/article/details/127913753