上线跨域问题（解决）！

火爆番茄炒蛋码

于 2024-09-07 09:18:48 发布

阅读量291

点赞数 2

文章标签： java

本文链接：https://blog.csdn.net/m0_61301727/article/details/141937492

版权

前端（使用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需要在浏览器设置中打开防跨域追踪。