vue用axios进行token请求出现has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header的解决方案

遇到的问题一

Access to XMLHttpRequest at ‘http://localhost:8081/order/no’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

翻译:通过CORS策略已阻止从源"http:// localhost:8080"访问"http:// localhost:8081/order/no"处的XMLHttpRequest:所请求的资源上不存在"Access-Control-Allow-Origin"标头。

理解:因为vue跟后端服务的端口不一样,所以访问就是跨域访问,它要求访问的请求头里有Access-Control-Allow-Origin,而这个不配置就没有

解决的方法

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
   
    @Override
    protected void configure(HttpSecurity http) throws Exception {
   
        http.csrf().disable(); //开启跨域访问
        http.cors(); //开启跨域资源共享
    }
}
  • 也许这个解决方法有效但我并没成功用它解决问题:@CrossOrigin注解 *
@CrossOrigin(allowedHeaders = {
   "Authorization"})
@GetMapping("/res")
public ResponseResult<List<vongCover>> pages(){
   
        return new ResponseResult<List<vongCover>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当浏览器出现 "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource" 错误时,这是由于浏览器的同源策略所致,即浏览器限制了跨域请求。为了解决这个问题,您可以在服务端添加一个响应头来允许跨域请求。 如果您使用的是Node.js,可以在服务端代码中添加以下代码来设置响应头: ```javascript res.set("Access-Control-Allow-Origin", "*"); ``` 这将允许所有的域名都可以进行跨域请求。如果您只想允许特定的域名进行跨域请求,可以将"*"替换为您想要允许的域名。 另外,需要注意的是,添加响应头后需要重新启动服务端,以使更改生效。 这样,当前端发送请求时,就不会再出现 "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource" 的错误了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [解决浏览器跨域问题 “has been blocked by CORS policy: No ‘Access-Control-Allow-Originheader is ...](https://blog.csdn.net/m0_50671318/article/details/119821838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值