求大神解决跨域问题

[ccc年]

本小白这个项目前端架构是vue，用的npm在本地端口上测试前端程序，忽然有一个项目要求访问服务器的图片，服务器用的是apache，我在代码里直接用的服务器http链接请求图片，问题就在这，我在本机的浏览器上输入链接可以正常访问图片，但在项目里引用这个链接就会报跨域错误。既然浏览器能正常访问就应该代表跨域的问题不出在后端上，那么前端到底需要配置哪些东西呢

[丰云]

参考文章 建议认真理解什么叫同源策略，认真理解跨域产生的过程以及根本原因

[丰云]

任何浏览器，通过输入url访问网络资源，是不可能产生跨域问题的。 所有跨域问题的产生，都是在已经打开的某个页面内部，再次访问其他来源的网络资源，才会产生跨域问题。

[ccc年]

引用 6 楼 丰云的回复:

任何浏览器，通过输入url访问网络资源，是不可能产生跨域问题的。 所有跨域问题的产生，都是在已经打开的某个页面内部，再次访问其他来源的网络资源，才会产生跨域问题。

大佬，我还是有一点疑惑，就是这个跨域是在前后端产生，还是在我发布项目的端口和本地dev服务器上产生的呢

[丰云]

引用 7 楼 m0_52902349 的回复:

[quote=引用 6 楼 丰云的回复:]任何浏览器，通过输入url访问网络资源，是不可能产生跨域问题的。 所有跨域问题的产生，都是在已经打开的某个页面内部，再次访问其他来源的网络资源，才会产生跨域问题。

大佬，我还是有一点疑惑，就是这个跨域是在前后端产生，还是在我发布项目的端口和本地dev服务器上产生的呢[/quote] 具体说，跨域是浏览器对你访问的资源和当前所在页面的来源，做了一个判断，如果是同一个来源，就通过，不是同一个来源，就报跨域。 所以，跨域问题是浏览器产生的。 跟后端的服务端口、服务器没有直接关系。 但有时候我们需要在一个网站里打开另外一个授权的网站的资源，怎么办呢？所以浏览器就开放了白名单认证功能。口语，你可以这么理解。 所谓白名单认证，就是在服务端给跨域而来的访问，打上允许访问的标记，这样浏览器接收到这个跨域访问的回执，也会放行。

[丰云]

跨域问题本质是浏览器的同源策略引起的，但浏览器的安全策略不可能修改，因此，只能服务端来解决。 你需要做的就是在服务端的入口添加允许跨域的白名单

[丰云]

let crossOrigins = "http://www.xxx.com:80,http://xxx.com:80";
app.all("*", function (req, res, next) {
  if (crossOrigins.indexOf(req.headers.origin) >= 0) {
    res.header("Access-Control-Allow-Origin", req.headers.origin);
  }

参考下nodejs版的服务端代码处理方式

[ccc年]

引用 2 楼 丰云的回复:

let crossOrigins = "http://www.xxx.com:80,http://xxx.com:80";
app.all("*", function (req, res, next) {
  if (crossOrigins.indexOf(req.headers.origin) >= 0) {
    res.header("Access-Control-Allow-Origin", req.headers.origin);
  }

参考下nodejs版的服务端代码处理方式

但是我能在浏览器上直接输入服务器图片连接就能访问，但是在本地localhost上部的就闲时间跨域，是不是nodejs本地的服务器和我本地的项目产生了跨域而和后端服务器没关系呢