1. 首页首页
  2. 科技前沿科技前沿

前端跨域配置方案（前端跨域解决方案有哪些）

科技前沿 • • 阅读 43

前端跨域配置方案（前端跨域解决方案有哪些）浏览器请求的三种报错 域名不一致就是跨域 主要包括 跨域的解决方案有很多 例如 前端解决方案 后端解决方案 新建 html 界面 并通过 live server 插件为 html 页面开辟一个端口 lt pre class prettyprint hljs xml style padding 0 5em font family

大家好，我是讯享网，很高兴认识大家。



浏览器请求的三种报错：

域名不一致就是跨域，主要包括：

跨域的解决方案有很多，例如 

前端解决方案：

后端解决方案：

新建html界面，并通过 live server 插件为html页面开辟一个端口

<pre class=“prettyprint hljs xml” style=“padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;”><!DOCTYPE html><html lang=“en”><head>
    <meta charset=“UTF-8”>
    <meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    <title>Document</title></head><div>
    <pre>
        spring:
          cloud:
            gateway:
            globalcors: # 全局的跨域处理
              add-to-simple-url-handler-mapping: true # 解决options请求被拦截问题
              corsConfigurations:
                ’[/]‘:                   allowedOrigins: # 允许哪些网站的跨域请求                     - ”http://127.0.0.1:5500”                   allowedMethods: # 允许的跨域ajax的请求方式                     - ”GET”                     - ”POST”                     - ”DELETE”                     - ”PUT”                     - ”OPTIONS”                   allowedHeaders: ”*“ # 允许在请求中携带的头信息                   allowCredentials: true # 是否允许携带cookie                   maxAge:  # 这次跨域检测的有效期        </pre>        </div><script src=”https://unpkg.com/axios/dist/axios.min.js”></script><script> axios.get(“http://localhost:10010/user/1?authorization=admin”)
    .then(res => console.log(res.data))
    .catch(err => console.log(err)); </script></html>

讯享网

安装 live server 插件


讯享网

配置成功！

运行程序调用接口

安装成功后，在html页面 右击，单击 Open Live Server 启动


运行程序后出现如下问题


出现跨域问题，下面给出解决方案！

停止Live Server

右击直接选中Stop Live Server 即可


完成停止！

采用 注解的方式

讯享网<pre class=“prettyprint hljs less” style=“padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;”>/  * @author whc   @date 2022/7/9 11:11  /@RestController@CrossOriginpublic class TestController {  }

@CrossOrigin 注解解析：

声明该注解允许该接口跨域访问

@CrossOrigin 表示所有的URL均可访问此资源

@CrossOrigin(origins = “http://127.0.0.1:5500”)

采用配置类的方式

通过JavaConfig来配置跨域

<pre class=“prettyprint hljs java” style=“padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;”>import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configurationpublic class  WebConfig  implements  WebMvcConfigurer  {      // mvc拦截器配置跨域     @Override     public  void  addCorsMappings(CorsRegistry registry)  {          // 跨域路径         CorsRegistration cors = registry.addMapping(“/”);        // 可访问的外部域         cors.allowedOrigins(””);        // 支持跨域用户凭证         cors.allowCredentials(true);         cors.allowedOriginPatterns(””);        // 设置 header 能携带的信息         cors.allowedHeaders(“*”);        // 支持跨域的请求方法         cors.allowedMethods(“GET”, ”POST”, ”PUT”, ”DELETE”, ”OPTIONS”);        // 设置跨域过期时间，单位为秒         cors.maxAge(3600);     }    // 简写形式     @Override     public  void  addCorsMappings(CorsRegistry registry)  {          registry.addMapping(“/”)                 .allowedOrigins(””)                 .allowCredentials(true)                 .allowedOriginPatterns(””)                 .allowedHeaders(“*”)                 .allowedMethods(“GET”, ”POST”, ”PUT”, ”DELETE”, ”OPTIONS”)                 .maxAge(3600);     } }

两种方式均可解决跨域问题。

配置yaml网关信息，放行指定url请求

讯享网<pre class=“prettyprint hljs yaml” style=“padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;”>server:  port: 10010 # 网关端口spring:  application:  name: gateway # 服务名称  cloud:  nacos:  server-addr: localhost:8848 # nacos地址  gateway:  routes: # 网关路由配置  - id: user-service # 路由id，自定义，只要唯一即可           # uri: http://127.0.0.1:8081 # 路由的目标地址 http就是固定地址  uri: lb://userService # 路由的目标地址 lb就是负载均衡，后面跟服务名称  predicates: # 路由断言，也就是判断请求是否符合路由规则的条件  - Path=/user/ # 这个是按照路径匹配，只要以/user/开头就符合要求  - id: order-service # 路由id，自定义，只要唯一即可           # uri: http://127.0.0.1:8081 # 路由的目标地址 http就是固定地址  uri: lb://orderService  predicates:  - Path=/order/  - Before=2022-07-09T17:42:47.789-07:00[Asia/Shanghai]  globalcors: # 全局的跨域处理  add-to-simple-url-handler-mapping: true # 解决options请求被拦截问题  corsConfigurations:          ’[/*]‘:  allowedOrigins: # 允许哪些网站的跨域请求  - ”http://127.0.0.1:5500”  allowedMethods: # 允许的跨域ajax的请求方式  - ”GET”  - ”POST”  - ”DELETE”  - ”PUT”  - ”OPTIONS”  allowedHeaders: ”“ # 允许在请求中携带的头信息  allowCredentials: true # 是否允许携带cookie  maxAge:  # 这次跨域检测的有效期

配置完成后，前端访问，如下

小讯
上一篇 2025-05-10 20:45
下一篇 2025-06-17 11:41

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/177528.html