上线跨域问题(解决)!

前端(使用vercel)

区分生产环境和开发环境(2个方法)

方法1

const isDev = process.env.NODE_PATH === 'development'
const myAxios = axios.create({
     baseURL: isDev ? 'http://localhost:8080/api' : '线上接口'
 });

方法2(vite)

根目录新建两个文件

.env.production

.env.development

里面填写线上和开发地址

development填写
VITE_API_BASE_URL=https://开发地址(localhost)/



production填写
VITE_API_BASE_URL=https://线上地址.com/

在axios的全局配置中配置

const myAxios = axios.create({
    baseURL: import.meta.env.VITE_API_BASE_URL ||'http://localhost:8080/api'
});


myAxios.defaults.withCredentials = true//开启发送请求带着cookie

vercel代理配置

前端到此配置完成跨域的方案。

后端(微信云托管)

打包之前需要配置线上地址(在controller业务里面加入跨域注解)

@CrossOrigin(origins = "https://线上地址", allowCredentials = "true")

另外,全局的跨域config也需要配置一下

/**
 * 跨域配置
 *
 */
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //设置允许跨域的路径
        registry.addMapping("/**")
                //设置允许跨域请求的域名
                //当**Credentials为true时,**Origin不能为星号,需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
                .allowedOrigins("http://localhost:3000", "http://127.0.0.1:3000", "https://线上地址"
                        , "http://localhost:5173", "http://127.0.0.1:5173")
                //是否允许证书 不再默认开启
                .allowCredentials(true)
                //设置允许的方法
                .allowedMethods("*")
                //跨域允许时间
                .maxAge(3600);
    }
}

还需要配置yml文件,更换mysql、redis等地址,这里在application-prod.yml中

# 线上配置文件
spring:
  # DataSource Config
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: 'jdbc:mysql://xx.xx.xx.xx:3306/数据库table名?useSSL=false'
    username: root
    password: 1234
    #redis 配置
  redis:
    port: 6379
    host: xxx.xxx.xxx.xxx  # Redis 服务器的 IP 地址
    database: 0
    redisson_database: 3

server:
  address: 0.0.0.0
  servlet:
    session:
      cookie:
        secure: true  # 仅在 HTTPS 下发送 Cookie
        http-only: true  # 防止 JavaScript 访问
        same-site: none  # 允许跨域请求

配置完成,pc端和安卓可以正常访问,但是ios不能正常访问

ios需要在浏览器设置中打开防跨域追踪。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值