vue项目解决访问tomcat服务器文件跨域问题

跨域相关的知识就不多说了，这里直接说解决方案。因为我这里访问的是文件，比如pdf啥的，所以没有走java接口，如果走接口直接在接口层面配置允许跨域就行了，如下：

@RestController
@CrossOrigin
public class MyController {
    @RequestMapping("/ok")
    public Map<String, String> ok() {
        Map<String, String> res = new HashMap<>(3);
        res.put("name","zhaopq");
        res.put("age","18");
        res.put("city","天津");
        return res;
    }
}

我这里说的是不走接口层次的，

1. 就是直接在tomcat层面配置允许跨域访问，打开tomcat安装文件里面的conf/web.xml这个文件，加上如下代码：

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

这样跨域访问tomcat文件的问题就解决了

2. 用node搭一个中间网关层，用node服务器访问到资源后再返回给前端，跨域问题在node里面去解决，其实原理也一样，新建一个node项目，代码如下：

yarn init

yarn add express

yarn add http-proxy-middleware

然后在package.json加上
"scripts":{
  	"dev":"node src/index.mjs"
  }

新建src目录，下面新建index.mjs文件，.mjs就是一种js文件格式，Node.js 会将.cjs文件视为 CommonJS 模块，将.mjs文件视为 ECMAScript 模块。它会将.js文件视为项目的默认模块系统（除非package.json说的是 CommonJS "type": "module"）

import express from 'express'
import { createProxyMiddleware } from 'http-proxy-middleware';
const app = express();
//这里解决跨域问题
app.all('*', (_, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  res.header('Access-Control-Allow-Methods', '*')
  next()
})

// --------- 这里设置个代理访问，跟vue里面devServer的代理差不多 -------------------------
app.use('/proxy', createProxyMiddleware({
    target: "http://paperless-ftp.example.com",
    changeOrigin: true,
    pathRewrite: {
      "^/proxy": ""
    }
}))

app.listen(3002, () => console.log('Server is running on port 3002'))

比如访问文件路径是http://paperless-ftp.example.com/test.pdf，现在就改成http://localhost:3002/proxy/test.pdf

如果是开发环境，直接在vue.config.js里面配置devServer就可以了，如下：

proxy: { // 配置跨域
      '/proxy': {
        target: 'http://paperless-ftp.example.com',
        changOrigin: true, // 允许跨域
        pathRewrite: {
          '^/proxy': ''
        }
      }
    }

同上，比如访问文件路径是http://paperless-ftp.example.com/test.pdf，现在就改成http://localhost:端口号/proxy/test.pdf

打完手工！！

vue项目解决访问tomcat服务器文件跨域问题

猜你喜欢