(高分毕业设计)道路裂纹检测系统前端后端源代码+文档说明报告

# 道路裂纹检测系统 ### https://road.tanfuhua.com 体验地址 ### 包括App前端、web前端、一部分后端 ### 接口文档在./web/interface.md ### 检测算法尚未引用 ### 联系方式直接留言 or 2813223276@qq.com ### 关于跨域问题的解决方案 ###### 前端解决的几种方法 1. 首先配置ajax请求的请求头，跨域问题的发生往往是由游览器的同源检测策略造成的，常见解决方法：请求头加上下面这个 ``` 'Access-Control-Allow-Origin':'*' ``` 2. 使用jsonp发送，使用方法可以去jsonp的教程 3. 如果vue框架可以在vue.config.js里面配置proxy ``` devServer:{ port: 8080, proxy: { // key:描述项目中哪些请求需要被代理服务器代理，以路径前缀方式描述key，定义被拦截请求的前缀 "/api": { target: "http://127.0.0.1:8080", // 定义被拦截的请求需要访问的真实服务器 pathRewrite: { // 通过前缀替换进行地址的重写和定义：去掉/api（因为/api默认会拼接上去） "^/api": "" // 替换掉以/api开头的，这里用空字符串替换，直接去掉 } } } } ``` 4. 如果使用uniapp框架，uniapp也提供了类似vue.config.js的配置方法：在manifest.json里添加（源码视图里加） ``` "h5": { "devServer": { "proxy": { "/8888": { "target": "https://www.baidu.com/api", "changeOrigin": true, "pathRewrite": { "^/8888": "/" } }, "/8800": { "target": "https://www.taobao.com/api", "changeOrigin": true, "pathRewrite": { "^/8800": "" } } } } } ``` ##### 后端解决的几种方法 1. 最简单常用的：Controller层添加 ``` @CrossOrigin ``` 2. 如果有拦截器，可以检查一下是否是拦截器的问题。如果是则给拦截器加上跨域的配置： ``` public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) { HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin", "*"); chain.doFilter(req, res); } } ``` ##### 服务器部署出现跨域的解决方法（使用Nginx部署） 1. 在配置文件里配置请求头 ``` server { location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; proxy_pass http://upstream_server; } } ``` 2. Nginx的请求重定向 ``` server { listen 80; server_name example.com; rewrite ^/dir1/page1.html$ /dir2/page2.html permanent; } ``` #### Nginx配置示例 ``` server { listen 80; server_name psychology.tanfuhua.com; index index.php index.html index.htm default.php default.htm default.html; root /www/server/stop; #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则 #error_page 404/404.html; #SSL-END #ERROR-PAGE-START 错误页配置，可以注释、删除或修改 #error_page 404 /404.html; #error_page 502 /502.html; #ERROR-PAGE-END #PHP-INFO-START PHP引用配置，可以注释或修改 #include enable-php-74.conf; #PHP-INFO-END #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效 #include /www/server/panel/vhost/rewrite/psychology.tanfuhua.com.conf; #REWRITE-END #禁止访问的文件或目录 location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md) { return 404; } #一键申请SSL证书验证目录相关设置 location ~ \.well-known{ allow all; } #禁止在证书验证目录放入敏感文件 if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) { return 403; } location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; error_log /dev/null; access_log /dev/null; } location ~ .*\.(js|css)?$ { expires 12h; error_log /dev/null; access_log /dev/null; } access_log /www/wwwlogs/psychology.tanfuhua.com.log; error_log /www/wwwlogs/psychology.tanfuhua.com.error.log; } ```