java设置跨域后 前端通过域名访问无法java后台无法获取cookie

### 前端 JS 判断 URL 是否为 404 或空链接并解决跨域问题 在前端开发中，判断一个 URL 是否有效（即是否存在或返回状态码为 200）以及处理可能涉及的跨域问题是常见需求。以下是实现这一功能的具体方法。 #### 方法一：使用 XMLHttpRequest 进行请求验证 可以通过 `XMLHttpRequest` 对目标 URL 发起 HEAD 请求来获取其响应状态码。HEAD 请求不会下载资源内容，仅用于检查资源的状态。 ```javascript function checkUrlStatus(url, callback) { const xhr = new XMLHttpRequest(); xhr.open('HEAD', url, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { callback(null, 'URL is valid and accessible.'); } else if (xhr.status === 404) { callback(new Error('URL not found.'), null); } else { callback(new Error(`Unexpected status code ${xhr.status}`), null); } } }; try { xhr.send(); } catch (e) { callback(e, null); } } ``` 此方法可以用来检测本地服务器上的文件或其他同源资源的存在性[^1]。然而，在尝试访问不同域下的资源时可能会遇到跨域限制问题。 #### 解决跨域问题的方法 针对跨域场景下无法直接通过 JavaScript 获取远程站点信息的情况，有多种技术手段可供选择： ##### 使用 CORS 配置 最推荐的方式是在服务端开启 CORS 支持，允许特定来源的客户端发起 AJAX 请求。例如，在 Java 后台可通过如下方式配置响应头字段： ```java response.setHeader("Access-Control-Allow-Origin", "*"); // 如果需要携带 Cookie，则应指定具体域名而非通配符 '*' response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With"); ``` 当浏览器接收到设置了适当 CORS 头部的服务端回复后，即可正常解析数据而无需担心安全策略阻止操作执行[^4]。 ##### JSONP 技术 尽管现代应用更倾向于采用 RESTful API 设计风格配合 CORS 实现交互逻辑，但在某些特殊情况下仍可考虑利用 JSONP 来绕过传统意义上的 Same Origin Policy 。不过需要注意的是，JSONP 只能完成 GET 类型的操作，并且依赖于对方提供专门适配该机制的数据格式输出函数名作为回调参数传递给它调用[^1]。 ##### Proxy Server 中介转发 无论是 Nginx 还是 Node.js ，都可以充当反向代理角色帮助我们间接触达那些原本受限的目标地址。比如下面这个简单的 Express 应用例子展示了如何设置路由规则从而达到目的： ```javascript const express = require('express'); const request = require('request'); let app = express(); app.use('/proxy', (req, res) => { let targetUrl = req.query.url; if (!targetUrl) return res.sendStatus(400); request(targetUrl).pipe(res); // 将外部网站的内容流式传输回来 }); app.listen(8080, ()=>console.log('Proxy server running on port 8080')); ``` 这样做的好处在于完全规避掉了任何潜在的安全隐患同时还能灵活控制额外附加行为诸如缓存优化等等[^1]. #### 注意事项 - 上述提到的各种方案各有优劣适用范围，请根据实际业务需求权衡选用合适的办法。 - 当涉及到敏感信息安全方面考量的时候务必谨慎行事遵循最佳实践指南建议。

### Axios 请求后台接口 404 错误解决方案 当使用 Axios 发送请求至后台接口时遇到 404 错误，通常可能是由于以下几个原因引起的： #### 1. **路径拼接错误** 确认前端代码中定义的 API 路径是否正确。如果路径不匹配或者存在大小写敏感问题，则可能导致 404 错误。可以通过打印完整的 URL 来验证。 ```javascript console.log('Requesting to:', `${baseURL}${path}`); ``` 此外，在 Vue 中通过 `vue.config.js` 配置代理时，需注意目标地址是否正确[^1]。例如，HTTP 和 HTTPS 的协议差异可能引发重定向问题（如 HTTP -> HTTPS 导致 301 或者 404）。 --- #### 2. **后端未暴露对应接口** 如果后端确实不存在该接口路径，也会触发 404 错误。建议检查后端路由配置并确认其已正常加载。对于 Spring Boot 应用程序，可尝试以下方式排查： - 使用 Postman 测试对应的接口是否存在。 - 查看日志输出，确保控制器方法已被注册。 若为跨域场景下的 CORS 设置不当也可能表现为 404 错误。此时应调整后端允许的 Origin 列表[^2]。 --- #### 3. **跨域问题伪装成 404** 当前项目采用前后端分离架构时，跨域请求容易因 CORS 政策限制而导致异常行为。即使实际接口可用，但由于预检请求 (OPTIONS) 失败，最终会显示为 404 错误。 解决办法之一是在后端全局启用 CORS 支持。例如在 Spring Boot 中可通过如下代码实现[^2]: ```java @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") // 替换为具体的前端地址更安全 .allowedMethods("GET", "POST", "PUT", "DELETE"); } ``` 对于特定情况下需要传递 Cookie 数据的情况，还需额外关注 `withCredentials` 参数设置及其配套的服务端响应头处理逻辑[^4]。 --- #### 4. **API 地址解析失败** 某些环境下 DNS 可能未能及时更新记录从而影响域名映射准确性；另外本地测试阶段忘记指定正确的主机名亦会造成类似现象。比如开发模式下默认监听 localhost:8080 ，但实际部署位置发生变化却未同步修改连接字符串参数值的话同样会产生此类状况。 修改 vue.config.js 文件内的 devServer.proxy 属性来规避这些问题是一个常见做法[^1]: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'https://your-backend-domain.com', changeOrigin: true, secure: false, // 忽略 SSL 证书校验 }, }, }, }; ``` --- #### 5. **其他潜在因素** - **缓存机制干扰**: 清除浏览器缓存或禁用 DevTools 缓存功能再重新发起调用操作看看效果如何变化； - **负载均衡器/反向代理规则冲突**: 如 Nginx/Apache 上面设置了某些转发条件却没有考虑到新增加的功能模块所在子目录结构布局特点等等情况均有可能引起类似的报错提示信息出现。 综上所述，针对 Axios 访问后台接口返回 404 的问题可以从以上几个方面逐一排查直至找到根本原因为止。 ```javascript // 示例代码片段展示如何正确初始化 Axios 实例 const instance = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL || '/', timeout: 5000, }); instance.interceptors.request.use(config => { config.headers['Authorization'] = localStorage.getItem('token'); return config; }, error => Promise.reject(error)); ```